Reine CSS3-Implementierung gängiger kleiner Pfeilbeispiele in Webseiten

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Verwendung von reinem CSS3 vor, um die üblichen kleinen Pfeile auf Webseiten zu erkennen. Ich hoffe, dass er allen helfen kann.

/* css3三角形（向上 ▲） */
p.arrow-up {
 width:0px;
 height:0px;
border-left:5px solid transparent;  /* 右透明 */
 border-right:5px solid transparent; /*右透明 */
  border-bottom:5px solid #2f2f2f; /* 定义底部颜色 */
  font-size:0px;
  line-height:0px;
}
/* css3三角形（向下 ▼） */
p.arrow-down {
  width:0px;
  height:0px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}
/* css3三角形（向左） */
p.arrow-left {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-right:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
/* css3三角形（向右） */
p.arrow-rightright {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-left:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

Verwandte Empfehlungen:

CSS zum Implementieren eines rechteckigen Effekts mit einem kleinen dreieckigen Pfeil_html/css_WEB-ITnose

So erstellen Sie mit CSS+P eine Ebene mit einem kleinen Pfeil auf der rechten Seite_html/css_WEB-ITnose

Einführung in die Verwendung von JavaScript-Pfeilfunktionen

Das obige ist der detaillierte Inhalt vonReine CSS3-Implementierung gängiger kleiner Pfeilbeispiele in Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!