Styling triangle and semicircle shapes with css

1. Triangle style

 

htriangle-down {
   height:0;
   border-left:11rpx solid transparent;
   border-right:11rpx solid transparent;
   border-top:12rpx solid #475669;
}

 

2. Semicircle

 html :

 <view class="user-divide">
      <view  class="user-divide-line"></view>
 </view>

css:

/* Rounded corners below */ 
.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. The arrow behind the font

/* arrow */

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