话不多说直接先上效果图
其实原理很简单,就是一个带边框的方块加上一个黑色三角形和一个白色三角形,最后通过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; }