如图要实现红框处的小三角,试了一下在小程序里用伪类实现,结果并不显示,代码如下
.item-cont-msg::before{
display: block;
content: ‘’;
width: 0;
height: 0;
border-top: 18rpx solid transparent;
border-bottom: 18rpx solid transparent;
border-left: 18rpx solid transparent;
border-right: 18rpx solid #f3f3f3;
position: absolute;
z-index: 1;
top:22rpx;
left: -18rpx;
}
但并不显示,是wxss的border在伪类下显示不支持么?在html5里测试是可以显示的,就小程序不行。这是为何呢?
最后我用一个方形进行旋转实现:
.item-cont-msg::before{
display: block;
content: ‘’;
width: 18rpx;
height: 18rpx;
background: #f3f3f3;
position: absolute;
z-index: 1;
top:22rpx;
left: -9rpx;
transform: rotate(45deg);
}