纯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;
       }