CSS verwendet :before :after, um kleine Dreiecksbeispiele zum Teilen zu schreiben

In diesem Artikel werden hauptsächlich detaillierte Informationen zur Verwendung von :before:after zum Schreiben kleiner Dreiecke in CSS vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Die zuvor geschriebenen Dreiecke hatten immer die gleiche Farbe und den gleichen Stil ohne Ränder. Wie folgt:

Der CSS-Code lautet wie folgt:

.tri-up{width: 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red;  }
.tri-left{width: 0;height:0;border-top:20px solid transparent;border-bottom: 20px solid transparent;border-left: 20px solid red;}
.tri-right{width: 0;height:0;border-top:20px solid transparent;border-bottom: 20px solid transparent;border-right: 20px solid red;}
.tri-down{width: 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid red; }

Um das folgende kleine Dreieck zu schreiben, Sie müssen zur Pseudoklasse verwenden: before :after

CSS-Code:

#demo {
            margin: 100px;;
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: relative;
            border: 2px solid #333;
        } //方框的样式

        #demo:after, #demo:before {
            border: solid transparent;
            content: ' ';
            height: 0;
            left: 100%;    //根据三角形的位置，可以随意更改。
            position: absolute;
            width: 0;
        } 

        #demo:after {
            border-width: 10px;
            border-left-color: #fff;
            top: 20px;//根据三角的位置改变
        }//此处是一个白色的三角

        #demo:before {
            border-width: 12px;
            border-left-color: #000;
            top: 18px;
        }此处是一个黑色的三角
//当#demo:after和#demo:before的样式重合以后，由于top值的大小不同，就可以得到中间是白色，但是边框的三角形。如上图。

<p id="demo"></p>

Wenn Sie den Stil des Bildes unten ändern möchten:

, lautet der CSS-Code wie folgt:

#demo {
            margin: 100px;;
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: relative;
            border: 2px solid #333;
        }

        #demo:after, #demo:before {
            border: solid transparent;
            content: ' ';
            height: 0;
            top: 100%;
            position: absolute;
            width: 0;
        }

        #demo:after {
            border-width: 10px;
            border-top-color: #fff;
            left: 20px;
        }

        #demo:before {
            border-width: 12px;
            border-top-color: #000;
            left: 18px;
        }

Verwandte Empfehlungen:

So verwenden Sie CSS, um den kleinen Dreieckseffekt zu erzielen_html/css_WEB-ITnose

Javascript Der Schieberegler für das kleine Dreieck folgt langsam dem Effekt, wenn die Maus nach oben bewegt wird. _Javascript-Fähigkeiten

Verwenden Sie CSS3, um eine Div-Box mit einem kleinen Dreieck (ohne Bilder) zu implementieren_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonCSS verwendet :before :after, um kleine Dreiecksbeispiele zum Teilen zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!