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