用css编写三角和半圆形状样式
1.三角样式
htriangle-down { height:0; border-left:11rpx solid transparent; border-right:11rpx solid transparent; border-top:12rpx solid #475669; }
2.半圆
html :
<view class="user-divide"> <view class="user-divide-line"></view> </view>
css:
/* 下面的圆角 */ .user-divide { position: relative; height: 40rpx; width: 90%; left: 5%; background: #fff; } .user-divide:before { left: -10rpx; } .user-divide:after { right: -10rpx; } .user-divide:before, .user-divide:after { position: absolute; top: 0; content: ""; width:36rpx; height: 36rpx; background-color: #5AA2E7; border-radius: 50%; }
.user-divide-line { position: absolute; top: 50%; margin-top: -1px; border-top: 1px dashed #E0E6ED; width: 90%; left: 5%; right: 5%; }
3.字体后面的箭头
/* 箭头 */ .m-list-item.has-arrow::after { content: " "; display: inline-block; height: 18rpx; width: 18rpx; border-width: 2rpx 2rpx 0 0; border-color: #8492A6; border-style: solid; position: absolute; top: 50%; right: 30rpx; }