用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;
}

 

转载于:https://www.cnblogs.com/yf-html/p/8881879.html