CSS pur pour implémenter un petit logo en forme de flèche ou de triangle

En tant qu'ingénieur front-end, il est inévitable d'utiliser CSS pour créer des petites flèches, triangles et autres signes dans votre travail. Je vais maintenant partager avec vous comment créer de petites flèches, triangles et autres signes en utilisant du CSS pur.

Implémenter des petites flèches :

.arrow{
    width: 20px;
    height: 20px;
    margin-top: 50px;
    margin-left: 50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(45deg);/*旋转角度*/
}
<div class="arrow"></div>

Implémenter des triangles :

.triangle{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    transform:rotate(45deg);
}
<div class="triangle"></div>

(Tutoriel vidéo gratuit : Tutoriel vidéo CSS)

Comment faire Afficher plusieurs éléments sur une seule ligne ?

(1) display:inline convertit les éléments en éléments en ligne, mais les attributs width et height ne fonctionnent pas

(2) display: inline-block permet d'afficher les éléments sur une seule ligne, mais cela sera affecté par les espaces et les touches de saut de ligne, il y aura un espacement par défaut

Solution :

1 Supprimez les effets des espaces et des touches de saut de ligne afin que les étiquettes soient toutes sur une seule. line (cette méthode n'est pas recommandée pour la lisibilité) Pas bon)

2. Ajoutez un attribut font-size:0 à l'élément parent de l'élément avec l'attribut display:inline-block

display:inline-block在ie6 7下不兼容的解决办法？
dispaly:inline;//css hack ie浏览器可以识别
zoom:1;//触发css hack的layout

3. Utilisez float:left /right, mais vous devez effacer le float

Recommandations associées :

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!