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.

ein Quadrat

<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.

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

<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

Geben Sie hier die Bildbeschreibung ein

<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

Geben Sie hier die Bildbeschreibung ein

<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

Geben Sie hier die Bildbeschreibung ein

<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

Geben Sie hier die Bildbeschreibung ein

<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

Geben Sie hier die Bildbeschreibung ein

<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

Geben Sie hier die Bildbeschreibung ein

<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

Geben Sie hier die Bildbeschreibung ein

<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 °.

Geben Sie hier die Bildbeschreibung ein

<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.

Geben Sie hier die Bildbeschreibung ein

<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% .

Bildschirmfoto

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 .

Bildschirmfoto

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:

Trapezoid

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.

Geben Sie hier die Bildbeschreibung ein

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

Siehe Demo

Pyramide

Verwendung von Grenzen und 2D - Transformationsverfahren Dieses Beispiel zeigt , wie eine Pyramide erzeugen skewY() und rotate() auf pseudo - Elementen.

Pyramide

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


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow