Html+CSS pour créer des icônes triangulaires-tutoriel php-php.cn

Html+CSS pour créer des icônes triangulaires

墨辰丷

Libérer： 2023-03-29 17:46:01

original

1804 Les gens l'ont consulté

Cet article présente principalement le code Html+CSS pertinent pour dessiner des icônes triangulaires en détail De nombreuses pages Web ont des icônes triangulaires, généralement des images découpées. Ici, vous pouvez utiliser css3+html pour écrire des triangles. Amis lecteurs, vous pouvez vous référer. à

et jetez d'abord un œil aux rendus :

Le code est le suivant :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #test1 {   
            height:20px;   
            width:20px;   
            border-color:#FF9600 #3366ff #12ad2a #f0eb7a;   
            border-style:solid;   
            border-width:20px;   
        }   
        #test2 {   
            height:0;   
            width:0;   
            overflow: hidden; /* 这里设置overflow, font-size, line-height */   
            font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */   
            line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */   
            border-color:#FF9600 #3366ff #12ad2a #f0eb7a;   
            border-style:solid;   
            border-width:20px;   
        }   
        #test3 {   
            height:0;   
            width:0;   
            overflow: hidden;   
            font-size: 0;   
            line-height: 0;   
            border-color:#FF9600 transparent transparent transparent;   
            border-style:solid;   
            border-width:20px;   
        }   
        #test4 {   
            height:0;   
            width:0;   
            overflow: hidden;   
            font-size: 0;   
            line-height: 0;   
            border-color:#FF9600 transparent transparent transparent;   
            border-style:solid dashed dashed dashed;   
            border-width:20px;   
        }/*兼容IE6*/   
        #test5 {   
            height:0;   
            width:0;   
            overflow: hidden;   
            font-size: 0;   
            line-height: 0;   
            border-color:#FF9600 #3366ff transparent transparent;   
            border-style:solid solid dashed dashed;   
            border-width:40px 40px 0 0 ;   
        }   
    </style>
</head>
<body>
    <p id="test1"></p><br>
    <p id="test2"></p><br>
    <p id="test3"></p><br>
    <p id="test4"></p><br>
    <p id="test5"></p><br>
</body>
</html>

Copier après la connexion

Résumé : Ce qui précède est-ce que l'ensemble du contenu de cet article devrait être utile à l'étude de chacun.

Recommandations associées :

Comment utiliser CSS pour dessiner des triangles et des parallélogrammes

Explication détaillée de CSS dessiner un triangleAnalyse technique du motif de flèche

Utiliser CSS pour dessiner un triangleFlèche

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!