Einführung
Wir lernen, wie man mit einfachem CSS verschiedene Arten von flachen Grafiken erstellt.
Rechteck
.rectangle { width: 250px; height: 150px; background-color: #6DC75F; } <p></p>
Dreieck
.triangleUp { border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 150px solid #6DC75F; width: 0; height: 0; } <p></p>
Oval
.oval { width: 300px; height: 150px; background: #6DC75F; -moz-border-radius: 150px / 75px; -webkit-border-radius: 150px / 75px; border-radius: 150px / 75px; } <p></p>
Halbmondform
.moon { width: 150px; height: 150px; border-radius: 50%; box-shadow: 15px 15px 0 0 green; } <p></p>
Blätter
.leaf { border-radius: 5px 300px 3px 300px; background: #6DC75F; width: 150px; height: 150px; } <p></p>
Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS verschiedene grafische Formen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!