Vous emmène jouer avec différentes flèches de direction en CSS

Lors du développement d'une page, je rencontre de nombreuses listes qui nécessitent l'utilisation de flèches. Vous pouvez également utiliser directement des images comme arrière-plans, et il n'y a aucun problème de compatibilité. Pas besoin de CSS3, en comparaison, fonctionne mieux que les images.

Principe : Un carré de hauteur et de largeur égales, sélectionnez un côté dont vous avez besoin et interceptez-le, ce sera un trapèze. Lorsque la hauteur et la largeur sont 0 et que les autres côtés sont transparents, ce sera. être un triangle. Il en ressort

Code trapèze :

html:
<div class="arrow"></div>
css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}

Réglez la hauteur et la largeur sur 0, et les autres côtés sont de couleurs transparentes, et le triangle sort :

html:
<div class="arrow"></div>
css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;//左箭头
}

En développement, vous pouvez utiliser des pseudo-classes pour positionner l'implémentation sans changer la structure dom, qui est simple et élégante. content fournit la position du triangle. Cet attribut ne peut pas manquer.

html:
<div class="arrow">文字文字</div>
css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content:&#39;&#39;;
}

Maintenant que nous poursuivons la conception graphique, il existe un autre type de flèche de ligne triangulaire, qui est plus populaire.
Définissez deux pseudo-classes. La première pseudo-classe couvre l'autre pseudo-classe. Laissez simplement quelques lignes de côté :

html:
<div class="arrow">文字文字</div>
CSS:
div {
       position: relative; 
    }
    .arrow:after,.arrow:before {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left-color: orange;
        position: absolute;
        content: "";
    }
   .arrow:before{
    top: 0;
   left: 70px;//根据实际情况调整
   border-left-color: white;
   }

puissiez-vous l'aimer.

Merci à tous d'avoir lu, j'espère que vous en bénéficierez beaucoup.

Cet article est reproduit à partir de : https://blog.csdn.net/qq_34250472/article/details/55513862

Tutoriel recommandé : "Tutoriel CSS"

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!