CSS => Einzelelementformen

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

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:

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

Siehe Demo

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

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

CSS
Einzelelementformen

Suche…