純CSS一個div實現無縫隙尖角框

話不多說直接先上效果圖

 

其實原理很簡單,就是一個帶邊框的方塊加上一個黑色三角形和一個白色三角形，最后通過position定位實現。

代碼如下：

HTML就一個div

<div></div>

CSS

 div{
            position: relative;
            width: 200px;
            height: 100px;
            border: 2px solid #000;
            margin-top:100px;
       }
       div::before,div::after{
            display: inline-block;
            content:'';
            position: absolute;
            border: 20px solid transparent;
       }
       div::before{
            left: 60px;
            top: -42px;
            border-bottom-color:#000;
       }
       div::after{
            left: 60px;
            top: -39px;
            border-bottom-color:#fff;
       }