伪类实现小三角不生效
发布于 5 年前 作者 cuilei 13852 次浏览 来自 问答

如图要实现红框处的小三角,试了一下在小程序里用伪类实现,结果并不显示,代码如下

.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);

}

回到顶部