CSS
Kształty pojedynczego elementu

Plac

Aby utworzyć kwadrat, zdefiniuj element o szerokości i wysokości. W poniższym przykładzie mamy element o width i height 100 pikseli każdy.

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background: rgb(246, 156, 85);
}

Trójkąty

Aby utworzyć trójkąt CSS, zdefiniuj element o szerokości i wysokości 0 pikseli. Kształt trójkąta zostanie utworzony przy użyciu właściwości obramowania. W przypadku elementu o zerowej wysokości i szerokości 4 obramowania (górny, prawy, dolny, lewy) tworzą trójkąt. Oto element o 0 wysokości / szerokości i 4 różnokolorowych ramkach.

Ustawiając niektóre obramowania na przezroczyste, a inne na kolor, możemy tworzyć różne trójkąty. Na przykład w trójkącie w górę ustawiamy dolną ramkę na żądany kolor, a następnie ustawiamy lewą i prawą ramkę na przezroczyste. Oto obraz z lewą i prawą ramką lekko zacieniowaną, aby pokazać, jak powstaje trójkąt.

Wymiary trójkąta można zmienić, zmieniając różne szerokości obramowania - wyższe, krótsze, krzywe itp. Wszystkie poniższe przykłady pokazują trójkąt o wymiarach 50 x 50 pikseli.

Trójkąt - skierowany w górę

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

Trójkąt - skierowany w dół

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

Trójkąt - skierowany w prawo

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

Trójkąt - skierowany w lewo

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

Trójkąt - skierowany w górę / w prawo

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

Trójkąt - skierowany w górę / w lewo

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

Trójkąt - skierowany w dół / w prawo

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

Trójkąt - skierowany w dół / w lewo

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

Wybuchy

Wybuch jest podobny do gwiazdy, ale punkty rozciągają się na mniejszą odległość od ciała. Pomyśl o kształcie pęknięcia jak kwadracie z dodatkowymi, lekko obróconymi kwadratami ułożonymi na wierzchu.

Dodatkowe kwadraty są tworzone za pomocą ::before i ::after psuedo-elements.

8-punktowa seria

8-punktowa seria składa się z 2 warstwowych kwadratów. Dolny kwadrat jest samym elementem, dodatkowy kwadrat jest tworzony za pomocą pseudoelementu :before . Dno jest obrócone o 20 °, górny kwadrat jest obrócony o 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-punktowa seria

Seria 12 punktów to 3 warstwowe kwadraty. Dolny kwadrat jest samym elementem, dodatkowe kwadraty są tworzone za pomocą pseudoelementów :before i :after . Dno jest obrócone o 0 °, następny kwadrat jest obrócony o 30 °, a góra jest obrócona o 60 °.

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

Koła i elipsy

okrąg

Aby utworzyć okrąg , zdefiniuj element o równej width i height ( kwadrat ), a następnie ustaw właściwość border-radius tego elementu na 50% .

HTML

<div class="circle"></div>

CSS

.circle {
   width: 50px;
   height: 50px;
   background: rgb(246, 156, 85);
   border-radius: 50%;
}

Elipsa

Elipsa jest podobna do koła, ale ma różne wartości width i height .

HTML

<div class="oval"></div>

CSS

.oval {
  width: 50px;
  height: 80px;
  background: rgb(246, 156, 85);
  border-radius: 50%;
}

Trapezoidalny

Trapez może być wykonany przez element blokowy o zerowej wysokości (wysokości 0px ), szerokości większej niż zero i ramce, która jest przezroczysta, z wyjątkiem jednej strony:

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

Zmieniając boki granicy, można ustawić orientację trapezu.

Sześcian

Ten przykład pokazuje, jak utworzyć sześcian przy użyciu metod transformacji 2D skewX() i skewY() na pseudoelementach.

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

Zobacz demo

Piramida

Ten przykład pokazuje, jak utworzyć piramidę za pomocą ramek i metod transformacji 2D skewY() i rotate() na pseudoelementach.

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