[CSS] Figury geometryczne i nie tylko

Ten wpis poświęcony jest tworzeniu różnych figur w CSS, w tym geometrycznych.

Tworzenie nowej figury zaczynamy od utworzenia elementu div z odpowiednią klasą, której nazwa odzwierciedla typ figury, na przykład:

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

Poniżej reguły CSS do utworzenia najpopularniejszych figur:

Koło

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}

Trójkąt

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
}

Prostokąt

.rectangle {
  width: 200px;
  height: 100px;
  background-color: purple;
}

Sześciokąt

.hexagon {
  width: 100px;
  height: 55px;
  background-color: orange;
  position: relative;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.hexagon:before {
  top: -25px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid orange;
}
.hexagon:after {
  bottom: -25px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid orange;
}

Równoległobok

.parallelogram {
  width: 200px;
  height: 100px;
  transform: skew(20deg);
  background-color: pink;
}

Trapez

.trapezoid {
  width: 200px;
  height: 0;
  border-bottom: 100px solid blue;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

Elipsa

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: yellow;
}

Romb

.diamond {
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  background-color: cyan;
}

Pentagon

.pentagon {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: gray;
}
.pentagon:before,
.pentagon:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.pentagon:before {
  top: 0;
  left: 50%;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid gray;
  transform: translateX(-50%);
}
.pentagon:after {
  bottom: 0;
  left: 50%;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid gray;
  transform: translateX(-50%);
}

Stożek

.cone {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}

Gwiazda

.star {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid yellow;
  position: relative;
  transform: rotate(-45deg);
}
.star:before,
.star:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.star:before {
  bottom: 45px;
  border-bottom: 70px solid yellow;
  transform: rotate(-45deg);
}
.star:after {
  top: -95px;
  border-bottom: 70px solid yellow;
  transform: rotate(45deg);
}

W CSS można tworzyć również inne figury. Możesz np. stworzyć kostkę 3d, którą można poruszać w przestrzeni 3d.