Vorher: Nachher, wie man ein kleines Dreieck ausgibt-H5-Tutorial-php.cn

Vorher: Nachher, wie man ein kleines Dreieck ausgibt

php中世界最好的语言

Freigeben： 2018-03-20 13:56:51

Original

2442 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie ein kleines Dreieck vorher:nachher ausgeben und welche Vorsichtsmaßnahmen es gibt, um ein kleines Dreieck vorher:nachher auszugeben. Hier ist ein praktischer Fall, schauen wir uns das an.

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; }

Nach dem Login kopieren

Um das folgende kleine Dreieck zu schreiben, müssen Sie die Pseudoklasse :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值的大小不同，就可以得到中间是白色，但是边框的三角形。如上图。

Nach dem Login kopieren

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

Nach dem Login kopieren

Um zum Stil des Bildes unten zu wechseln:

Der CSS-Code lautet 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;
        }

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

H5 implementiert mehrere Bildvorschau-Uploads und anklickbare Drag-Steuerelemente

Detaillierte Erläuterung der Verwendung des CSS3-Mischmodus

Das obige ist der detaillierte Inhalt vonVorher: Nachher, wie man ein kleines Dreieck ausgibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!