純粋な CSS3+DIV で小さな三角形の境界線効果を実現するためのサンプル コード

HTMLコードは次のとおりです <div class="arrow-up">
     <!--上向きの三角形-->
</div>
<div class="arrow-down">
    <!--下向きの三角形-->
</div>
<div class="arrow-left">
    <!--左向きの三角形-->
</div>
<div class="arrow-right">
    <!--右向きの三角形-->
</div>
 
以下では、CSS3を使用して、それぞれ上向き、下向き、左向き、右向きの三角形を実装します。/*上向き矢印*/
.矢印上 {
    幅:0;
    高さ:0;
    border-left:30px 透明、実線;
    border-right:30px 透明、実線;
    border-bottom:30px solid #fff;
}
    
 /*下矢印*/
.矢印下{
    幅:0;
    高さ:0;
    border-left:20px 透明、実線;
    border-right:20px 透明、実線;
    上境界線:20px 実線 #0066cc;
}
    
 /*左向きの矢印*/
.矢印左 {
    幅:0;
    高さ:0;
    border-top:30px 透明;
    border-bottom:30px 透明;
    border-right:30px 黄色一色;
}
   
/*右矢印*/
.矢印右 {
    幅:0;
    高さ:0;
    border-top:50px 透明;
    border-bottom: 50px 透明の実線;
    border-left: 50px 緑一色;
}

<view class="index_sale_lists">
      <view class="sanjiao"></view>
      <view class="index_sale_list">
        <view class="index_sale_choice">選択した商品: <text>Shangnao</text></view>
        <view class="index_sale_tezhi">
          <テキスト>
            特徴：牛の肩と首の後ろ、背骨の両側にあります。肉は柔らかくてジューシーで、脂肪が均等に分散され、美しい大理石模様があります。柔らかい食感で口の中でとろけます。脂肪が少なく、タンパク質が豊富です。鍋に適しており、揚げ物、揚げ物、グリル料理にも使用できます。
          </テキスト>
        </ビュー>
      </ビュー>
    </ビュー>

.index_sale_lists{
  マージン: 50rpx 24rpx 0;
  背景色: #F2F6F4;
  境界線の半径: 20rpx;
  位置: 相対的;
}
.サンジャオ{
    位置: 絶対;
    左: 50%;
    上:-15rpx;
    幅:0;
    高さ:0;
    border-left:10px 透明、実線;
    border-right:10px 透明、実線;
    ボーダー下部:10px 実線 #F2F6F4;
    /* zインデックス: -1; */
}