TA貢獻(xiàn)1830條經(jīng)驗 獲得超9個贊
純CSS實現(xiàn)，如果借用了請點(diǎn)贊，謝謝！
有改進(jìn)意見或疑問請留言，謝謝！
<div class="line">
<div class="tri"></div>
</div>
* {
box-sizing: border-box;
}
.line {
width: 200px;
height: 20px;
overflow: hidden;
}
.tri {
position: relative;
height: 100%;
border-bottom: 2px solid #58a;
}
.tri::before {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 20px;
height: 20px;
border: 2px solid #58a;
transform: translate(-50%, 50%) rotateZ(45deg);
background-color: #fff;
}
核心在于transform屬性的旋轉(zhuǎn)
不足：
（1）低版本瀏覽器不支持
（2）角不為90度需要用到CSS3，視圖景深perspective
舉報