Reines CSS3-Beispiel für die Umsetzung kleiner Pfeile, die häufig auf Webseiten zu finden sind

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von reinem CSS3 zur Implementierung allgemeiner kleiner Pfeile in Webseiten vorgestellt. Freunde in Not können sich auf

Verwendung von reinem CSS3 zur Implementierung allgemeiner kleiner Pfeile in Webseiten beziehen ist wie folgt Anzeige:

/* 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;
}

Zusammenfassung

Das obige ist der detaillierte Inhalt vonReines CSS3-Beispiel für die Umsetzung kleiner Pfeile, die häufig auf Webseiten zu finden sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!