css画箭头 双箭头

//外层可以加标签用来定位 <view class="arrow-right"> <view></view> <view></view> </view> .arrow-right { display: flex; width: 40rpx; height: 40rpx; transform: rotate(90deg);/*改变箭头的方向*/ } .arrow-right view { width: 10rpx; height: 10rpx; position: relative; margin: 0 2rpx; } .arrow-right view:before { content: ""; display: block; position: absolute; top: 50%; right: 0; width: 0; height: 0; border: 10rpx solid; margin-top: -10rpx; border-color: transparent transparent transparent #cccccc); /* 箭头颜色 */ } .arrow-right view:after { content: ""; display: block; position: absolute; top: 50%; right: 2rpx; /*位置偏移，决定箭头的粗细*/ width: 0; height: 0; border: 10rpx solid; margin-top: -10rpx; border-color: transparent transparent transparent #fff;/* 与模块底色相同*/ }

单箭头

<view class="a"><view> .a { width:10rpx; height:10rpx; border-left:2rpx solid #cccccc; border-top:2rpx solid #cccccc; transform: rotate(-45deg);/*改变箭头的方向*/ }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。