css选中三角形样式

Question

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

Answer 1

纯CSS实现，如果借用了请点赞，谢谢！有改进意见或疑问请留言，谢谢！<div class="line">&nbsp; &nbsp; <div class="tri"></div></div>* {&nbsp; &nbsp; box-sizing: border-box;}.line {&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; height: 20px;&nbsp; &nbsp; overflow: hidden;}.tri {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; border-bottom: 2px solid #58a;}.tri::before {&nbsp; &nbsp; content: "";&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 50%;&nbsp; &nbsp; bottom: -2px;&nbsp; &nbsp; width: 20px;&nbsp; &nbsp; height: 20px;&nbsp; &nbsp; border: 2px solid #58a;&nbsp; &nbsp; transform: translate(-50%, 50%) rotateZ(45deg);&nbsp; &nbsp; background-color: #fff;}核心在于transform属性的旋转不足：（1）低版本浏览器不支持（2）角不为90度需要用到CSS3，视图景深perspective