Sample code for achieving small triangle border effect with pure CSS3+DIV

The html code is as follows <div class="arrow-up">
     <!--Upward triangle-->
</div>
<div class="arrow-down">
    <!--Downward triangle-->
</div>
<div class="arrow-left">
    <!--Left-pointing triangle-->
</div>
<div class="arrow-right">
    <!--Rightward triangle-->
</div>
 
Below we use CSS3 to implement the upward, downward, left and right triangles respectively /*arrow up*/
.arrow-up {
    width:0;
    height:0;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:30px solid #fff;
}
    
 /*arrow down*/
.arrow-down {
    width:0;
    height:0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-top:20px solid #0066cc;
}
    
 /*Arrow pointing left*/
.arrow-left {
    width:0;
    height:0;
    border-top:30px solid transparent;
    border-bottom:30px solid transparent;
    border-right:30px solid yellow;
}
   
/*arrow right*/
.arrow-right {
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid green;
}

<view class="index_sale_lists">
      <view class="sanjiao"></view>
      <view class="index_sale_list">
        <view class="index_sale_choice">You have chosen: <text>Shangnao</text></view>
        <view class="index_sale_tezhi">
          <text>
            Characteristics: Beef topside is located at the back of the shoulder and neck, on both sides of the spine. The meat is tender and juicy, the fat is evenly distributed, and it has beautiful marble patterns. It has a soft texture and melts in the mouth. It is low in fat and high in protein. It is suitable for hot pot, and can be fried, deep-fried and grilled.
          </text>
        </view>
      </view>
    </view>

.index_sale_lists{
  margin: 50rpx 24rpx 0;
  background-color: #F2F6F4;
  border-radius: 20rpx;
  position: relative;
}
.sanjiao{
    position: absolute;
    left: 50%;
    top:-15rpx;
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #F2F6F4;
    /* z-index: -1; */
}