css选中三角形样式

Question

页面按钮在选中是会有一条带三角的蓝线，我想的是三角形叠加一条蓝线。不知道这样对不对？

Answer 1

纯CSS实现，如果借用了请点赞，谢谢！
有改进意见或疑问请留言，谢谢！

<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属性的旋转

不足：
（1）低版本浏览器不支持
（2）角不为90度需要用到CSS3，视图景深perspective

Answer 2

我想的是三角形叠加一条蓝线

问题在于你打算怎么实现这个“三角形”。如果是用 width: 0 + border 的办法的话，有个限制，就是背景色的处理，这个三角形没办法真正地“透明”。

Answer 3

如果是我的话，下面选中状态整体的形状会用svg做，然后用border-image或者before/after来实现这个效果。

Answer 4

可以两个三角形 一个蓝一个灰 蓝的在下 灰的在上 灰的把蓝的盖住但是漏出两条边 做成一条折线的样子

Answer 5

我赞同“放下那只猫”的做法，小的三角覆盖在大的三角上。
给你个demo链接吧。
http://www.zhangxinxu.com/stu...
这是张鑫旭用css做对话框时写的。