Maison > Opération et maintenance > Sécurité > Comment écrire un triangle en CSS

Comment écrire un triangle en CSS

PHPz
Libérer: 2023-05-14 14:07:56
avant
902 Les gens l'ont consulté

CSS pour écrire un triangle

/* create an arrow that points up */
div.arrow-up {
 width:0px;
 height:0px;
 border-left:5px solid transparent; /* left arrow slant */
 border-right:5px solid transparent; /* right arrow slant */
 border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px;
 line-height:0px;
}

/* create an arrow that points down */
div.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;
}

/* create an arrow that points left */
div.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;
}

/* create an arrow that points right */
div.arrow-right {
 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

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!

Étiquettes associées:
css
source:yisu.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal