Exemple CSS3 pur de réalisation de petites flèches que l'on trouve couramment dans les pages Web-tutoriel CSS-php.cn

Exemple CSS3 pur de réalisation de petites flèches que l'on trouve couramment dans les pages Web

黄舟

Libérer： 2017-10-17 10:30:43

original

1693 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur l'utilisation de CSS3 pur pour implémenter de petites flèches communes dans les pages Web. Les amis dans le besoin peuvent se référer à

Utilisation de CSS3 pur pour implémenter de petites flèches communes dans les pages Web. se présente comme suit Affichage :

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

Copier après la connexion

Résumé

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!