Геометрические фигуры с помощью CSS

Лепим геометрические фигуры при помощи CSS

Понравилась статья? Оставьте оценку:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

Квадрат

Нарисуем простейший квадрат при помощи CSS

<style>
.kvadrat{
  width: 100px;
  height: 100px;
  background: red;
}
</style>
<div class="kvadrat"></div

Прямоугольник

Прямоугольник тоже очень прост

.pryamougolnik {
	width: 200px;
	height: 100px;
	background: yellow;
}
<div class="pryamougolnik"></div>

Круг

Чтобы получить круг — рисуем квадрат и скругляем у него углы на 50%

.krug{
  width: 100px;
  height: 100px;
  background: blue;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
<div class="krug"></div>

Овал

Геометрическая фигура овал получится если на 50% скруглить углы у прямоугольника

.oval{
  width: 200px;
  height: 100px;
  background: blue;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
<div class="oval"></div>

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

Треугольники получаются с помощью указания трех border-ов. Причем один бордер должен быть больше двух других в 2 раза — и это будет основанием треугольника, а два оставшихся — должны быть по краям от основания и прозрачными. Примеры:

Треугольник направленный вверх(основание — нижний бордер)
.treugolnik-top{
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div class="treugolnik-top"></div>
Треугольник направленный вниз (основание — верхний бордер)
.treugolnik-bottom{
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid yellow;
}
<div class="treugolnik-bottom"></div>
Треугольник направленный вправо (основание — левый бордер)
.treugolnik-left{
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid blue;
  border-bottom: 50px solid transparent;
}
<div class="treugolnik-left"></div>
Треугольник направленный влево (основание — правый бордер)
.treugolnik-right{
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid green;
  border-bottom: 50px solid transparent;
}
<div class="treugolnik-right"></div>

Прямоугольные треугольники

Прямой угол слева вверху
.treugolnik-topleft{
  width: 0;
  height: 0;
  border-top: 100px solid red; 
  border-right: 100px solid transparent;	
}
<div class="treugolnik-topleft"></div>
Прямой угол справа вверху
.treugolnik-topright{
  width: 0;
  height: 0;
  border-top: 100px solid green; 
  border-left: 100px solid transparent;
}
<div class="treugolnik-topright"></div>
Прямой угол в левом нижнем углу
.treugolnik-bottomleft{
  width: 0;
  height: 0;
  border-bottom: 100px solid yellow; 
  border-right: 100px solid transparent;	
}
<div class="treugolnik-bottomleft"></div>
Прямой угол справа внизу
.treugolnik-bottomright{
  width: 0;
  height: 0;
  border-bottom: 100px solid blue; 
  border-left: 100px solid transparent;
}
<div class="treugolnik-bottomright"></div>

Параллелограмм

Чтобы нарисовать параллелограмм нужно взять прямоугольник и наклонить его

.parallelogramm{
  width: 150px;
  height: 100px;
  -webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
   -o-transform: skew(20deg);
  background: green;
}
<div class="parallelogramm"></div>

Трапеция

Геометрическая фигура трапеция рисуется на том же принципе что и равносторонние треугольники. Просто добавим ширину для блока.

<style>
.trap{
  border-bottom: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
}
</style>
<div class="trap"></div>

PS. Трапецию можно поворачивать таким же образом что и треугольники. Как вставлять развернутую фигуру — я не буду расписывать, смотрите равносторонние треугольники.

Пятиугольник

<style>
.penta {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}
.penta:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}
</style>
<div class="penta"></div>

Шестиугольник

<style>
.hexa {
	width: 100px;
	height: 55px;
	background: red;
	position: relative;
}
.hexa:before {
	content: "";
	position: absolute;
	top: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
.hexa:after {
	content: "";
	position: absolute;
	bottom: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}
</style>
<div class="hexa"></div>

Восьмиугольник

<style>
.octa {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
}

.octa:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;    
	border-bottom: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}

.octa:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;    
	border-top: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}
</style>
<div class="octa"></div>

Сердце

<style>
.serdce {
    position: relative;
    width: 100px;
    height: 90px;
}
.serdce:before,
.serdce:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.serdce:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
</style>
<div class="serdce"></div>

Бесконечность

<style>
.inf{
    position: relative;
    width: 212px;
    height: 100px;
}
 
.inf:before,
.inf:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
 
.inf:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform:rotate(45deg);
       -moz-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
         -o-transform:rotate(45deg);
            transform:rotate(45deg);
}
</style>
<div class="inf"></div>

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