Verwenden Sie transparent, um Dreiecke zu formen-CSS-Tutorial-php.cn

Verwenden Sie transparent, um Dreiecke zu formen

php中世界最好的语言

Freigeben： 2018-03-22 14:26:01

Original

2609 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie mit Transparent Dreiecke herstellen und welche Vorsichtsmaßnahmen Sie bei der Verwendung von Transparent für Dreiecke beachten sollten. Schauen wir uns das unten an.

Die Darstellung ist wie folgt

Beispielcode

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 40px auto;
            width: 60px;
            background-color: #f0ac6b;
        }
        .t1{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            /*background-color: #f0ac6b;*/
            border-bottom: 40px solid red;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
        }
        .t2{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            /*background-color: #f0ac6b;*/
            border-bottom: 40px solid transparent;
            border-right: 40px solid red;
            /*border-left: 20px solid transparent;*/
        }
        .t3{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid red;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
        }
        .t4{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid transparent;
            border-left: 40px solid red;
        }
        .t5{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid red;
            border-right: 40px solid transparent;
        }
        .t6{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            border-left: 40px solid transparent;
            border-bottom: 40px solid red;
        }
        .t7{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-left: 40px solid red;
            border-bottom: 20px solid transparent;
            border-top: 20px solid transparent;
        }
        .t8{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-right: 40px solid red;
            border-bottom: 20px solid transparent;
            border-top: 20px solid transparent;
        }
    </style>
</head>
<body>
<p class="box">
    <p class="t1"></p>
    <p class="t3"></p>
    <p class="t2"></p>
    <p class="t4"></p>
    <p class="t5"></p>
    <p class="t6"></p>
    <p class="t7"></p>
    <p class="t8"></p>
</p>
</body>
</html>

Nach dem Login kopieren

I Ich glaube, Sie haben es gesehen. Im Fall dieses Artikels beherrschen Sie die Methode. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

CSS3-Browser-Kompatibilitätsprobleme

Durchscheinende Elemente festlegen

Erstellen rosa Anmeldeschnittstelle mit CSS3

Das obige ist der detaillierte Inhalt vonVerwenden Sie transparent, um Dreiecke zu formen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!