CSS
Einzelelementformen
Suche…
Quadrat
Um ein Quadrat zu erstellen, definieren Sie ein Element mit Breite und Höhe. Im folgenden Beispiel haben wir ein Element mit einer width
und height
von jeweils 100 Pixel.
<div class="square"></div>
.square {
width: 100px;
height: 100px;
background: rgb(246, 156, 85);
}
Dreiecke
Um ein CSS-Dreieck zu erstellen, definieren Sie ein Element mit einer Breite und Höhe von 0 Pixel. Die Dreiecksform wird unter Verwendung von Rahmeneigenschaften gebildet. Bei einem Element mit 0 Höhe und Breite bilden die 4 Ränder (oben, rechts, unten, links) jeweils ein Dreieck. Hier ist ein Element mit 0 Höhe / Breite und 4 verschiedenen farbigen Rändern.
Wenn Sie einige Ränder auf transparent setzen und andere auf eine Farbe, können wir verschiedene Dreiecke erstellen. In dem Aufwärts-Dreieck setzen wir beispielsweise den unteren Rand auf die gewünschte Farbe und dann den linken und den rechten Rand auf transparent. Hier ist ein Bild, dessen linker und rechter Rand leicht schattiert sind, um zu zeigen, wie das Dreieck geformt wird.
Die Abmessungen des Dreiecks können geändert werden, indem Sie die verschiedenen Randbreiten ändern - größer, kürzer, schief, usw. Die folgenden Beispiele zeigen alle ein Dreieck mit 50 x 50 Pixeln.
Dreieck - zeigt nach oben
<div class="triangle-up"></div>
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid rgb(246, 156, 85);
}
Dreieck - zeigt nach unten
<div class="triangle-down"></div>
.triangle-down {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid rgb(246, 156, 85);
}
Dreieck - nach rechts zeigend
<div class="triangle-right"></div>
.triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 50px solid rgb(246, 156, 85);
}
Dreieck - zeigt nach links
<div class="triangle-left"></div>
.triangle-left {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 50px solid rgb(246, 156, 85);
}
Dreieck - nach oben / rechts zeigen
<div class="triangle-up-right"></div>
.triangle-up-right {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 156, 85);
border-left: 50px solid transparent;
}
Dreieck - nach oben / links zeigen
<div class="triangle-up-left"></div>
.triangle-up-left {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 156, 85);
border-right: 50px solid transparent;
}
Dreieck - nach unten / rechts zeigen
<div class="triangle-down-right"></div>
.triangle-down-right {
width: 0;
height: 0;
border-bottom: 50px solid rgb(246, 156, 85);
border-left: 50px solid transparent;
}
Dreieck - nach unten / links zeigen
<div class="triangle-down-left"></div>
.triangle-down-left {
width: 0;
height: 0;
border-bottom: 50px solid rgb(246, 156, 85);
border-right: 50px solid transparent;
}
Platzt
Ein Burst ähnelt einem Stern, aber die Punkte erstrecken sich weniger vom Körper. Stellen Sie sich eine Burst-Form als Quadrat vor, mit zusätzlichen, leicht gedrehten Quadraten, die darüber angeordnet sind.
Die zusätzlichen Quadrate werden mit den Elementen ::before
und ::after
psuedo erstellt.
8 Punkt Burst
Ein 8-Punkt-Burst besteht aus 2 geschichteten Quadraten. Das untere Quadrat ist das Element selbst, das zusätzliche Quadrat wird mit dem Pseudoelement :before
. Die Unterseite ist um 20 ° gedreht, das obere Quadrat um 135 °.
<div class="burst-8"></div>
.burst-8 {
background: rgb(246, 156, 85);
width: 40px;
height: 40px;
position: relative;
text-align: center;
-ms-transform: rotate(20deg);
transform: rotate(20eg);
}
.burst-8::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: rgb(246, 156, 85);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
12 Punkt Burst
Ein 12-Punkt-Burst besteht aus 3 geschichteten Quadraten. Das untere Quadrat ist das Element selbst, die zusätzlichen Quadrate werden mit den Pseudoelementen :before
und :after
. Die Unterseite wird um 0 ° gedreht, das nächste Quadrat wird um 30 ° und die Oberseite um 60 ° gedreht.
<div class="burst-12"></div>
.burst-12 {
width: 40px;
height: 40px;
position: relative;
text-align: center;
background: rgb(246, 156, 85);
}
.burst-12::before, .burst-12::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: rgb(246, 156, 85);
}
.burst-12::before {
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.burst-12::after {
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
Kreise und Ellipsen
Kreis
Um einen Kreis zu erstellen, definieren Sie ein Element mit gleicher width
und height
(ein Quadrat ) und setzen Sie dann die Eigenschaft border-radius
dieses Elements auf 50%
.
HTML
<div class="circle"></div>
CSS
.circle {
width: 50px;
height: 50px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
Ellipse
Eine Ellipse ähnelt einem Kreis, jedoch mit unterschiedlichen Werten für width
und height
.
HTML
<div class="oval"></div>
CSS
.oval {
width: 50px;
height: 80px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
Trapezoid
Ein Trapez kann durch ein Blockelement mit einer Höhe von Null (Höhe von 0px
), einer Breite größer als Null und einem Rand gebildet werden, der bis auf eine Seite transparent ist:
HTML:
<div class="trapezoid"></div>
CSS:
.trapezoid {
width: 50px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid black;
}
Durch Ändern der Randseiten kann die Ausrichtung des Trapezes eingestellt werden.
Würfel
Dieses Beispiel zeigt, wie Sie einen Cube mit den 2D-Transformationsmethoden skewX()
und skewY()
für skewY()
erstellen.
HTML:
<div class="cube"></div>
CSS:
.cube {
background: #dc2e2e;
width: 100px;
height: 100px;
position: relative;
margin: 50px;
}
.cube::before {
content: '';
display: inline-block;
background: #f15757;
width: 100px;
height: 20px;
transform: skewX(-40deg);
position: absolute;
top: -20px;
left: 8px;
}
.cube::after {
content: '';
display: inline-block;
background: #9e1515;
width: 16px;
height: 100px;
transform: skewY(-50deg);
position: absolute;
top: -10px;
left: 100%;
}
Pyramide
Verwendung von Grenzen und 2D - Transformationsverfahren Dieses Beispiel zeigt , wie eine Pyramide erzeugen skewY()
und rotate()
auf pseudo - Elementen.
HTML:
<div class="pyramid"></div>
CSS:
.pyramid {
width: 100px;
height: 200px;
position: relative;
margin: 50px;
}
.pyramid::before,.pyramid::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border: 50px solid;
position: absolute;
}
.pyramid::before {
border-color: transparent transparent #ff5656 transparent;
transform: scaleY(2) skewY(-40deg) rotate(45deg);
}
.pyramid::after {
border-color: transparent transparent #d64444 transparent;
transform: scaleY(2) skewY(40deg) rotate(-45deg);
}