Maison >interface Web >tutoriel CSS >Comment obtenir un effet de bordure triangulaire en CSS3

Comment obtenir un effet de bordure triangulaire en CSS3

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal: 2021-12-16 10:33:216726parcourir

Méthode : 1. Utilisez l'instruction "border: length value solid transparent; border-top: height value solid color value" pour définir l'élément vide sur un style triangulaire. 2. Placez de petits éléments triangulaires à l'intérieur de grands éléments triangulaires de différentes couleurs ; À l’intérieur, vous pouvez obtenir l’effet d’un triangle avec une bordure.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment obtenir l'effet de triangle avec bordure en CSS3

En CSS, si vous souhaitez obtenir l'effet de triangle avec bordure, vous devez utiliser l'attribut border.

Nous avons d'abord besoin d'un élément div avec une largeur et une hauteur de 0, puis utilisons l'attribut border pour définir le style de bordure du div, définissez la valeur d'épaisseur de la bordure sur la moitié de la longueur du triangle inférieur et définissez la bordure. couleur à transparente.

Enfin, utilisez l'attribut border-top pour afficher la bordure supérieure de l'élément div.

Placez de petits éléments triangulaires à l'intérieur de grands éléments triangulaires de différentes couleurs pour obtenir l'effet de triangles avec des bordures.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #demo {
            width: 0;
            height: 0;
            position: relative;
            border-top: solid 50px transparent;
            border-right: solid 50px black;
            /* 黑色大三角形 */
            border-bottom: solid 50px transparent;
        }
 
        #demo:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            left: 3px;
            top: -45px;
            border-top: solid 45px transparent;
            border-right: solid 45px white;
            /* 白色小三角形 */
            border-bottom: solid 45px transparent;
        }
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>

Résultat de sortie :

Comment obtenir un effet de bordure triangulaire en CSS3

(Partage de vidéos d'apprentissage : Tutoriel vidéo 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!

Déclaration：

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

Article précédent：Comment obtenir un effet flip deux fois en CSS3Article suivant：Comment obtenir un effet flip deux fois en CSS3

Articles Liés

Voir plus