小程序如何利用CSS画出箭头
如题,小程序空间有限,为了省图片,我们可以用wxss画箭头,这里画的是向下的箭头。
源码如下:
.right_arrow {
height: 20rpx;
line-height: 20rpx;
position: relative;
z-index: 4;
}
.right_arrow:before {
content: "";
display: block;
position: absolute;
bottom: 2rpx;
right: 0;
width: 0;
height: 0;
border: 15rpx solid;
margin-top: -15rpx;
border-color: rgb(184, 107, 62) transparent transparent transparent ;
}
.right_arrow:after {
content: "";
display: block;
position: absolute;
bottom: 50%;
right: 0;
width: 0;
height: 0;
border: 15rpx solid;
margin-top: -15rpx;
border-color: rgba(255, 255, 255, 1) transparent transparent transparent;
}
效果:
<view>
<view class="right_arrow"></view>
<view class="right_arrow"></view>
</view>
那么如何画其他方向的箭头呢?
修改before和after里的下面这一行即可,其他的自己适配:
border-color: rgba(255, 255, 255, 1) transparent transparent transparent;
比如画向右的箭头:
.right_arrow {
height: 20rpx;
line-height: 20rpx;
position: relative;
padding: 18rpx;
z-index: 4;
}
.right_arrow:before {
content: "";
display: block;
position: absolute;
top: 50%;
right: 0;
width: 0;
height: 0;
border: 15rpx solid;
margin-top: -15rpx;
border-color: transparent transparent transparent rgba(255, 140, 0, 1);
}
.right_arrow:after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 4rpx;
width: 0;
height: 0;
border: 15rpx solid;
margin-top: -15rpx;
border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}
参考:
https://blog.csdn.net/qq_22038259/article/details/84035674
https://blog.csdn.net/foreverling_ling/article/details/52796453
https://blog.csdn.net/danfengw/article/details/54140395