208 0  

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

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

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

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


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

 
<div class="probtreygoln"></div>
<style>
.probtreygoln {
  width: 0;  height: 0;  
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid yellow;
  border-left: 100px solid gray;
}
</style>

или через псевдоэлементы:

<div class="probtreygoln"></div>
<style>
.probtreygoln::after {content:''; position:absolute; left:0; top:0; z-index:1;
  width: 0;  height: 0;  
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid yellow;
  border-left: 100px solid gray;
}
</style>

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

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

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020