Фигуры на чистом css

Примеры по созданию разных фигур с помощью чистого css.

Треугольники на css:

Генератор треугольников

Фигуры на clip-path

Сделать треугольник на чистом css очень просто, по сути это квадрат который через границы (border) разбивается на 4 треугольники, Вы должны убрать те треугольники которые вам не нужны - тоисть закрасить (border) в цвет фона или задать прозрачность (transparent). А также задать высоту.

<div class="probtreygoln"></div>
<style>
.probtreygoln::after { content: ''; width:0; height:0;  display:block; position:absolute; top:5px; left:-20px;
    border: 10px solid transparent;  /* Прозрачные границы */
    border-top: 10px solid red;  /* Для нужной стороны задаем цвет */
или:
 border-right: 10px solid green;
 border-bottom: 10px solid yellow;
 border-left: 10px solid gray;
}

Пример смены формата треугольника

  border-top: 100px solid red;
  border-right: 0px solid green;
  border-bottom: 0px solid yellow;
  border-left: 50px solid gray;

можно развернуть по горизонтали или вертикали:

 /* отобразить по горизонтали */
transform:-webkit-transform: scale(-1, 1); transform: scale(-1, 1); filter: FlipV;}

 /* отобразить по вертикали */
transform:-webkit-transform: scale(1, -1); transform: scale(1, -1); filter: FlipV;}

№1 Трапеция на чистом css

.fig-trapeze { width:250px; height:50px;  margin: 0 auto; 
border: 1px solid #B5B5B5; 
transform: perspective(50px) rotateX(40deg);} 

или вот так:

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

№2 Овал на чистом css

.fig-oval{width: 200px; height: 100px; background: red; border-radius: 100px / 50px;}

№2 Параллелограмм на чистом css

.fig-parallelogram { width: 160px; height: 100px;  transform: skew(30deg);}