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

       }