正文

纯CSS一个div实现无缝隙尖角框

IP云
IP云V管理员/0 阅读
09/19
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

话不多说直接先上效果图

其实原理很简单,就是一个带边框的方块加上一个黑色三角形和一个白色三角形，最后通过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;
}