Создание геометрических фигур при помощи CSS

Всем привет!
А знаете ли вы, что в CSS можно создавать различные фигуры без использования картинок?
Сомневаетесь?
Зря!
В этой статье я покажу результат, которого можно достичь с помощью нескольких строк в CSS.

Пропишите в HTML вот такой код:

<div id="bloggood-ru"></div>

Вот теперь приступаем к опытам.

Код, который будет сейчас предлагаться для создания фигур нужно разместить в CSS.
Поехали!!!

КВАДРАТ

#bloggood-ru
{
width: 100px;
height: 100px;
background: #7fee1d;
}

В результате:

ПРЯМОУГОЛЬНИК

#bloggood-ru
{
width: 170px;
height: 100px;
background: #7fee1d;
}

В результате:

КРУГ

#bloggood-ru
{
width: 100px;
height: 100px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
background: #7fee1d;
}

В результате:

ОВАЛ

#bloggood-ru
{
width: 100px;
height: 200px;
-webkit-border-radius: 50px / 100px;
-moz-border-radius: 50px / 100px;
border-radius: 50px / 100px;
background: #7fee1d;
}

В результате:

ТРЕУГОЛЬНИК

#bloggood-ru
{
width: 0;
height: 0;
border-bottom: 100px solid #7fee1d;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

В результате:

ТРЕУГОЛЬНИК ПЕРЕВЕРНУТЫЙ ВНИЗ

#bloggood-ru
{
width: 0;
height: 0;
border-top: 100px solid #7fee1d;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

В результате:

ТРЕУГОЛЬНИК РАЗВЕРНУТ ВЛЕВО

#bloggood-ru
{
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-right: 100px solid #7fee1d;
}

В результате:

ТРЕУГОЛЬНИК РАЗВЕРНУТ ВПРАВО

#bloggood-ru
{
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-left: 100px solid #7fee1d;
}

В результате:

РОМБ

#bloggood-ru
{
width: 100px;
height: 100px;
background: #7fee1d;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
margin: 60px 0 10px 310px;
}

В результате:

ТРАПЕЦИЯ

#bloggood-ru
{
height: 0;
width: 120px;
border-bottom: 120px solid #7fee1d;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

В результате:

ПАРАЛЛЕЛОГРАММ

#bloggood-ru
{
width: 100px;
height: 60px;
background:#7fee1d;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}

В результате:

ЗВЕЗДА

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

В результате:

ШЕСТИУГОЛЬНАЯ ЗВЕЗДА

#bloggood-ru
{
width: 0;
height: 0;
display: block;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #de34f7;
margin: 10px auto;
}
#bloggood-ru:after {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #de34f7;
margin: 30px 0 0 -50px;
}

В результате:

ПЯТИУГОЛЬНИК

#bloggood-ru
{
width: 54px;
position: relative;
border-width: 50px 18px 0;
border-style: solid;
border-color: #277bab transparent;
}
#bloggood-ru:before {
content: "";
height: 0;
width: 0;
position: absolute;
top: -84px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #277bab;
}

В результате:

ШЕСТИУГОЛЬНИК

#bloggood-ru
{
width: 100px;
height: 55px;
background: #fc5e5e;
position: relative;
margin: 10px auto;
}
#bloggood-ru:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -24px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #fc5e5e;
}
#bloggood-ru:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -24px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #fc5e5e;
}

В результате:

СЕРДЦЕ

#bloggood-ru
{
position: relative;
}
#bloggood-ru:before,#bloggood-ru:after {
content: "";
width: 70px;
height: 115px;
position: absolute;
background: red;
left: 70px;
top: 0;
-webkit-border-radius: 50px 50px 0 0;
-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%;
}
#bloggood-ru: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%;
}

В результате:

ОБЛАКО КОММЕНТАРИЯ

#bloggood-ru
{
width: 140px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#bloggood-ru:before {
content: "";
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}

В результате:

PACMAN

#bloggood-ru
{
width: 0;
height: 0;
border-right: 70px solid transparent;
border-top: 70px solid #ffde00;
border-left: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
}

В результате:

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Один ответ на комментарий - Создание геометрических фигур при помощи CSS

1. Елена

   04.03.2018 в 17:56

   Классно!

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, эффекты для сайта