HTML+CSS zum Erstellen von Dreieckssymbolen-PHP-Tutorial-php.cn

HTML+CSS zum Erstellen von Dreieckssymbolen

墨辰丷

Freigeben： 2023-03-29 17:46:01

Original

1804 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der relevante Code von HTML + CSS zum Zeichnen von Dreieckssymbolen im Detail vorgestellt. Auf vielen Webseiten können Sie sich auf CSS3 + HTML beziehen, um Dreiecke zu schreiben Gehen Sie zu

und schauen Sie sich zuerst die Renderings an:

Geben Sie den folgenden Code ein:

<!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>

Nach dem Login kopieren

Zusammenfassung: Das Obige ist dieser Artikel Ich hoffe, dass der gesamte Inhalt für das Studium aller hilfreich sein wird.

Verwandte Empfehlungen:

So verwenden Sie CSS zum Zeichnen von Dreiecken und Parallelogrammen

Detaillierte Erklärung von CSS Dreieck zeichnenTechnische Analyse des Pfeilmusters

Verwenden Sie CSS, um ein Dreieck zu zeichnenPfeil

Das obige ist der detaillierte Inhalt vonHTML+CSS zum Erstellen von Dreieckssymbolen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!