css選中三角形樣式

我想的是三角形疊加一條藍(lán)線

問(wèn)題在于你打算怎么實(shí)現(xiàn)這個(gè)“三角形”。如果是用 width: 0 + border 的辦法的話，有個(gè)限制，就是背景色的處理，這個(gè)三角形沒(méi)辦法真正地“透明”。

可以兩個(gè)三角形 一個(gè)藍(lán)一個(gè)灰 藍(lán)的在下 灰的在上 灰的把藍(lán)的蓋住但是漏出兩條邊 做成一條折線的樣子

如果是我的話，下面選中狀態(tài)整體的形狀會(huì)用svg做，然后用border-image或者before/after來(lái)實(shí)現(xiàn)這個(gè)效果。

我贊同“放下那只貓”的做法，小的三角覆蓋在大的三角上。
給你個(gè)demo鏈接吧。
http://www.zhangxinxu.com/stu...
這是張?chǎng)涡裼胏ss做對(duì)話框時(shí)寫(xiě)的。

純CSS實(shí)現(xiàn)，如果借用了請(qǐng)點(diǎn)贊，謝謝！
有改進(jìn)意見(jiàn)或疑問(wèn)請(qǐng)留言，謝謝！

<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