发现很多项目中都会用到这个三角形作前缀或是后缀,这边记录下来,可以直接copy
先看效果
代码
HTML部分
<view class="triangle">
<view class="triangle-main"></view>
</view>
SCSS部分
.triangle {
width: 18rpx;
height: 18rpx;
position: relative;
overflow: hidden;
margin-left: 12rpx;
.triangle-main {
position: absolute;
width: 18rpx;
height: 18rpx;
background-color: rgba(62, 63, 65, 0.8314);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: -54%;
}
}
也可以用伪元素::before和::after来做,看个人喜好,上面这个可以不用改直接抄