Loading
Геометрические фигуры на CSS

Геометрические фигуры на CSS

Геометрические фигуры на CSS
Подборка от студии дизайна «Движок», как нарисовать различные геометрические фигуры одним элементом HTML.
Это настоящая css магия!

Квадрат

Квадрат

#square {
width: 100px;
height: 100px;
background: red;
}

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

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

#rectangle {
width: 200px;
height: 100px;
background: red;
}

Круг

Круг

#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Овал

Овал

#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

Треугольник вверх

Треугольник вверх

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

Треугольник вниз

Треугольник вниз

#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

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

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

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

Треугольник направо

Треугольник направо

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

Треугольник в левом верхнем углу

Треугольник в левом верхнем углу

#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

Треугольник в правом верхнем углу

Треугольник в правом верхнем углу

#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;

}

Треугольник в левом нижнем углу

Треугольник в левом нижнем углу

#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}

Треугольник в правом нижнем углу

Треугольник в правом нижнем углу

#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}

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

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

#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew (20deg);
-moz-transform: skew (20deg);
-o-transform: skew (20deg);
background: red;
}

Трапеция

css-magia13

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

Звезда (6-конечная)

Звезда (6-конечная)

#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

Звезда (5-конечная)

Звезда (5-конечная)

#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate (35deg);
-webkit-transform: rotate (35deg);
-ms-transform: rotate (35deg);
-o-transform: rotate (35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate (-35deg);
-moz-transform: rotate (-35deg);
-ms-transform: rotate (-35deg);
-o-transform: rotate (-35deg);

}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate (-70deg);
-moz-transform: rotate (-70deg);
-ms-transform: rotate (-70deg);
-o-transform: rotate (-70deg);
content: '';
}

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

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

#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon: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;
}

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

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

#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon: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;
}
#hexagon: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;
}

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

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

#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}

#octagon: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;
}

#octagon: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;
}

Сердечко

Сердечко

#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart: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%;
}
#heart: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%;
}

Знак бесконечности

Знак бесконечности

#infinity {
position: relative;
width: 212px;
height: 100px;
}

#infinity:before,
#infinity: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);
}

#infinity: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);
}

Вот и все. Сохраните себе такую css-магию.
Если Вы хотите «поблагодарить» наш информационный портал о веб-разработке — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.стеях через сервисы ниже.

Отправить ответ

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

Войти с помощью: 
  Subscribe  
Notify of
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Войти с помощью: 
Генерация пароля