Implémentation CSS3 pure d'exemples courants de petites flèches dans les pages Web

Cet article présente principalement les informations pertinentes sur l'utilisation de CSS3 pur pour réaliser les petites flèches courantes dans les pages Web. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

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

Recommandations associées :

CSS pour implémenter un effet rectangulaire avec une petite flèche triangulaire_html/css_WEB-ITnose

Comment utiliser css+p pour créer un calque avec une petite flèche à droite_html/css_WEB-ITnose

Introduction à l'utilisation des fonctions fléchées JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!