Ich habe diese Code-Snippets gefunden http://www.css3shapes.com/, aber ich kann die Logik dahinter nicht verstehen. Ich meine, ich kenne die Funktion des Vorher / Nachher-Selektors. Was ich verwirrt habe, ist warum wir haben { height:0; width:40px; } im Code. Wenn jemand eine vollständige Erklärung zu diesem Code geben könnte, wird er sehr geschätzt.
#octagon {
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
margin: 70px 0 0 0;
}
Antworten:
4 für die Antwort № 1Wenn Sie ein paar Farben ändern, können Sie sehen, was gerade passiert: Das "nachher" -Bit ist wie der obere Teil eines abgeschrägten Bilderrahmens:
Die Oberseite des Rahmens ist rot, die Seiten sind grün und blau, aber es gibt keinen Boden, und die Größe des "Bildes" im Rahmen ist Breite 40, Höhe Null (dh die Linie entlang der unteren Kante des roten Bit).
Wenn Sie den fehlenden Boden hinzufügen und die Höhe 40 festlegen, können Sie den gesamten Rahmen sehen:
0 für die Antwort № 2
Es ist ein Trick, um CSS zu zwingen, eine dreieckige Form zu rendern. Check out #octagon: before {...}
Die Grenze-unten-Breite bestimmt die Höhe des Elements. Die Ränder an den Seiten addieren sich zu der definierten Breite und geben der Form eine Breite von 100px.
Sie können sich die Höhe vorstellen: 0 wirkt wie ein Fluchtpunkt in der Ferne. Die beiden Seiten bewegen sich darauf zu, erreichen sie aber in diesem Fall nie, da die Breite (100) größer ist als die Höhe 30.
Der Unterschied zwischen dem Dreieck und dem Oktagon ist die zusätzliche Breite:
width: 40px;
Spiele mit seinem Beispiel: http://jsfiddle.net/mXTrG/ Das Grau ist die Seitenränder und das Blau ist der untere Rand.
Ist das sinnvoll? Lass es mich wissen, wenn du Fragen hast!