Beispielcode zum Erzielen eines kleinen Dreiecksrahmeneffekts mit reinem CSS3+DIV

Der HTML-Code lautet wie folgt <div class="arrow-up">
     <!--Aufwärts gerichtetes Dreieck-->
</div>
<div Klasse="Pfeil nach unten">
    <!--Abwärts gerichtetes Dreieck-->
</div>
<div Klasse="Pfeil-links">
    <!--Nach links zeigendes Dreieck-->
</div>
<div Klasse="Pfeil-rechts">
    <!--Rechtsseitiges Dreieck-->
</div>
 
Im Folgenden verwenden wir CSS3, um die Dreiecke nach oben, unten, links und rechts zu implementieren /*Pfeil nach oben*/
.Pfeil nach oben {
    Breite: 0;
    Höhe: 0;
    Rahmen links: 30px durchgehend transparent;
    Rahmen rechts: 30px durchgehend transparent;
    Rahmen unten: 30px durchgezogen #fff;
}
    
 /*Pfeil nach unten*/
.Pfeil nach unten {
    Breite: 0;
    Höhe: 0;
    Rahmen links: 20px durchgehend transparent;
    Rahmen rechts: 20px durchgehend transparent;
    Rahmen oben: 20px durchgezogen #0066cc;
}
    
 /*Pfeil zeigt nach links*/
.Pfeil-links {
    Breite: 0;
    Höhe: 0;
    Rahmen oben: 30px durchgehend transparent;
    Rahmen unten: 30px durchgehend transparent;
    Rahmen rechts: 30px, durchgehend gelb;
}
   
/*Pfeil nach rechts*/
.Pfeil-rechts {
    Breite: 0;
    Höhe: 0;
    Rahmen oben: 50px durchgehend transparent;
    Rahmen unten: 50px durchgehend transparent;
    Rahmen links: 50px durchgehend grün;
}

<Ansichtsklasse="index_sale_lists">
      <Ansichtsklasse="sanjiao"></Ansicht>
      <Ansichtsklasse="index_sale_list">
        <view class="index_sale_choice">Sie haben ausgewählt: <text>Shangnao</text></view>
        <Ansichtsklasse="index_sale_tezhi">
          <text>
            Eigenschaften: Die Rinderoberschale befindet sich an der Rückseite der Schulter und des Nackens, auf beiden Seiten der Wirbelsäule. Das Fleisch ist zart und saftig, das Fett ist gleichmäßig verteilt und weist schöne Marmormuster auf. Es hat eine weiche Textur und schmilzt im Mund. Es ist fettarm und proteinreich. Es eignet sich für Eintopfgerichte und kann gebraten, frittiert und gegrillt werden.
          </text>
        </Ansicht>
      </Ansicht>
    </Ansicht>

.index_sale_lists{
  Rand: 50 Rpx 24 Rpx 0;
  Hintergrundfarbe: #F2F6F4;
  Randradius: 20rpx;
  Position: relativ;
}
.sanjiao{
    Position: absolut;
    links: 50%;
    oben: -15rpx;
    Breite: 0;
    Höhe: 0;
    Rahmen links: 10px durchgehend transparent;
    Rahmen rechts: 10px durchgehend transparent;
    Rahmen unten: 10px durchgezogen #F2F6F4;
    /* z-index: -1; */
}