Как создать геометрические фигуры с помощью кода CSS

Последнее обновлене - 15 января 2023 в 15:02

Сегодня, благодаря возможностям языка описания внешнего вида HTML-документа, имеется возможность создавать самые разнообразные геометрические фигуры на чистом CSS. Каскадные таблицы стилей позволяют получить и квадрат, и круг, и треугольник, стрелку, звезду и даже цветок или сердечко, а также много других фигур.

Содержание:

Окружность
Квадрат
Прямоугольник
Овал
Треугольник
Треугольник, направленный вершиной вниз
Треугольник, направленный вершинкой влево
Треугольник, направленный вправо
Ромб
Ещё один ромб
Трапеция
Параллелограмм
Звезда
Шестиконечная звезда
Пятиугольник
Шестиугольник
Восьмиугольник
Сердце
Яйцо
Бесконечность
Бабл (облачко) для комментария
Pacman
Лупа
Флажок
Крест
Стрелка
Конвертик или домик
Полумесяц

Совсем не обязательно, к примеру, рисовать прямоугольник в Photoshop или другом графическом редакторе, чтобы использовать изображение в дизайне сайта. Его можно отобразить при помощи кода CSS. По-моему, это отличное решение, поскольку большое количество картинок замедляет работу сайта.

При помощи CSS и HTML возможно создавать не только статичные фигуры. Им можно придавать движение. Посмотрите, например, как сделать анимацию стрелки-маятника. Или как украсить свой сайт новогодней мигающей гирляндой на HTML и CSS.

В этой подборке будут представлены результаты работы кода при создании некоторых распространённых геометрических фигур. Это удобно при создании баннеров и других элементов в дизайне сайта.

Окружность

Чтобы создать окружность с помощью CSS, воспользуемся тегом div. И зададим значение «circle» для идентификатора.

Код HTML

<div id="circle"></div>

1	<div id="circle"></div>

Код CSS

Для CSS необходимо задать значения «width» и «height». Значение для border radius задаём равным половине от «width» и «height».

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

#circle {

width: 120px;

height: 120px;

background: #7fee1d;

-moz-border-radius: 60px;

-webkit-border-radius: 60px;

border-radius: 60px;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/eYyqwVG"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Квадрат

Код HTML.
Как и в предыдущем примере, возьмём тег div с идентификатором «square».

<div id="square"></div>

1	<div id="square"></div>

Код CSS.
Для создания квадрата в CSS, значения «width» и «height» должны быть равны друг другу.

#square {
    width: 120px;
    height: 120px;
    background: #00B0F0;
}

#square {

width: 120px;

height: 120px;

background: #00B0F0;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/xxWrMgb"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

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

Код HTML.

<div id="rectangle"></div>

1	<div id="rectangle"></div>

Код CSS.
Здесь действуем почти так же, как и при создании квадрата, однако теперь «width» должно быть больше, чем «height».

#rectangle {
    width: 220px;
    height: 120px;
    background: #B21016;
}

#rectangle {

width: 220px;

height: 120px;

background: #B21016;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/XWEgOav"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Овал

Код HTML.
Для создания овала в CSS, зададим div с ID, равным «oval».

<div id="oval"></div>

1	<div id="oval"></div>

Код CSS.
Овал напоминает окружность. Зададим радиус, равным половине значения «height».

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

#oval {

width: 200px;

height: 100px;

background: #A349A4;

-webkit-border-radius: 100px / 50px;

-moz-border-radius: 100px / 50px;

border-radius: 100px / 50px;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/JjLJxOG"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Треугольник

Код HTML.
Чтобы создать треугольник с помощью CSS, укажем div с ID, равным «triangle».

<div id="triangle"></div>

1	<div id="triangle"></div>

Код CSS.
Для создания треугольника надо поиграть со свойством «border».

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #BFB500;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

#triangle {

width: 0;

height: 0;

border-bottom: 140px solid #BFB500;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/VwXWgyP"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Треугольник, направленный вершиной вниз

Код HTML.
Давайте попробуем создать перевернутый треугольник вершиной вниз с помощью CSS. Значение идентификатора: «triangle_down».

<div id="triangle_down"></div>

1	<div id="triangle_down"></div>

CSS
Создавая перевернутый треугольник, управляем толщиной границы:

#triangle_down {
    width: 0;
    height: 0;
    border-top: 140px solid #98E0AD;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

#triangle_down {

width: 0;

height: 0;

border-top: 140px solid #98E0AD;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/poLwGaG"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Треугольник, направленный вершинкой влево

Код HTML.
Для создания треугольника с вершиной, направленной влево, зададим div с ID «triangle_left».

<div id="triangle_left"></div>

1	<div id="triangle_left"></div>

Код CSS.

#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #511252;
    border-bottom: 70px solid transparent;
}

#triangle_left {

width: 0;

height: 0;

border-top: 70px solid transparent;

border-right: 140px solid #511252;

border-bottom: 70px solid transparent;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/poLwGLY"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

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

Код HTML.
В месте, где должен отображаться треугольник с вершиной, направленной вправо, напишем div с ID=»triangle_right».

<div id="triangle_right"></div>

1	<div id="triangle_right"></div>

Код CSS.

#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #E5DD4C;
    border-bottom: 70px solid transparent;
}

#triangle_right {

width: 0;

height: 0;

border-top: 70px solid transparent;

border-left: 140px solid #E5DD4C;

border-bottom: 70px solid transparent;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/GRxEzdO"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Ромб

Код HTML.
Для создания ромба создадим div с ID=»rhomb».

<div id="rhomb"></div>

1	<div id="rhomb"></div>

Код CSS.
Здесь, при создании ромба, используется свойство «transform» совместно со значениями «rotate». Отображаются два треугольника, образуя ромб.

#rhomb {
    width: 120px;
    height: 120px;
    background: #03FA4D;
/* 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 110px;
}

#rhomb {

width: 120px;

height: 120px;

background: #03FA4D;

/* 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 110px;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/MWVoLXM"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Ещё один ромб

<div id="diamond"></div>

1	<div id="diamond"></div>

#diamond {
margin-bottom: 20px; 
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #04A120;
position: relative; 
top: -50px;
}
#diamond:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
left: -50px; 
top: 70px;
border: 50px solid transparent;
border-top: 70px solid #47002D;
}

#diamond {

margin-bottom: 20px;

width: 0;

height: 0;

border: 50px solid transparent;

border-bottom: 70px solid #04A120;

position: relative;

top: -50px;

}

#diamond:after {

content: "";

width: 0;

height: 0;

position: absolute;

left: -50px;

top: 70px;

border: 50px solid transparent;

border-top: 70px solid #47002D;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/JjLJgKa"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Трапеция

Код HTML.
Для трапеции, напишем div с ID=»trapezium».

<div id="trapezoid"></div>

1	<div id="trapezoid"></div>

Код CSS.

#trapezoid {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #808080;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

#trapezoid {

height: 0;

width: 120px;

border-bottom: 120px solid #808080;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/OJvgdoZ"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

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

Код HTML.
Всё как обычно, для обозначения фигуры параллелограмм, зададим div с ID=»parallelogram».

<div id="parallelogram"></div>

1	<div id="parallelogram"></div>

Код CSS.
Для отображения параллелограмма надо установить значение skew для transform с поворотом элемента на угол в 30 градусов.

#parallelogram {
    width: 160px;
    height: 100px;
    background: #F8A1A4;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
    margin: 20px 0 10px 40px;
}

#parallelogram {

width: 160px;

height: 100px;

background: #F8A1A4;

-webkit-transform: skew(30deg);

-moz-transform: skew(30deg);

-o-transform: skew(30deg);

transform: skew(30deg);

margin: 20px 0 10px 40px;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/yLKXZRW"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Звезда

Код HTML.
Чтобы создать звезду, напишем div с ID=»star».

<div id="star"></div>

1	<div id="star"></div>

Код CSS.
При создании звезды используем свойства transform равным rotate.

#star {
    width: 0;
    height: 0;
    margin: 70px 0;
    color: #F41212;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #F41212;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}

#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #F41212;
    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);
}

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

#star {

width: 0;

height: 0;

margin: 70px 0;

color: #F41212;

position: relative;

display: block;

border-right: 100px solid transparent;

border-bottom: 70px solid #F41212;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

#star:before {

height: 0;

width: 0;

position: absolute;

display: block;

top: -45px;

left: -65px;

border-bottom: 80px solid #F41212;

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

}

#star:after {

content: '';

width: 0;

height: 0;

position: absolute;

display: block;

top: 3px;

left: -105px;

color: #F41212;

border-right: 100px solid transparent;

border-bottom: 70px solid #F41212;

border-left: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform: rotate(-70deg);

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg);

}

See the Pen <a href="https://codepen.io/HoboBo/pen/jOzwdXJ"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Шестиконечная звезда

Код HTML.

<div id="star_six_points"></div>

1	<div id="star_six_points"></div>

Код CSS.
Шестиконечная звезда создается с помощью свойства border.

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

#star_six_points {

width: 0;

height: 0;

margin-bottom: 30px;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #807900;

position: relative;

}

#star_six_points:after {

content: "";

width: 0;

height: 0;

position: absolute;

top: 30px;

left: -50px;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid #807900;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/eYMRxom"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

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

Код HTML.
Для пятиугольника создадим div с ID=»pentagon».

<div id="pentagon"></div>

1	<div id="pentagon"></div>

Код CSS.
Создать пятиугольник можно запросто при помощи двух элементов: трапеции и треугольника.

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

#pentagon {

position: relative;

width: 54px;

border-width: 50px 18px 0;

border-style: solid;

border-color: red transparent;

margin-top: 50px;

}

#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;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/WNzOPVm"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

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

Код HTML.
Для отображения шестиугольника создадим div с ID=»hexagon».

<div id="hexagon"></div>

1	<div id="hexagon"></div>

Код CSS.

#hexagon {
margin: 40px 0; 
width: 100px; 
height: 55px;
background: #F1CCAE;
position: relative;
}
#hexagon:before, 
#hexagon:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#hexagon:before {
top: -25px;
border-bottom: 25px solid #F1CCAE;
}
#hexagon:after {
bottom: -25px;
border-top: 25px solid #F1CCAE;
}

#hexagon {

margin: 40px 0;

width: 100px;

height: 55px;

background: #F1CCAE;

position: relative;

}

#hexagon:before,

#hexagon:after {

content: "";

width: 0;

height: 0;

position: absolute;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

#hexagon:before {

top: -25px;

border-bottom: 25px solid #F1CCAE;

}

#hexagon:after {

bottom: -25px;

border-top: 25px solid #F1CCAE;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/eYMRwKg"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

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

Код HTML.
Для фигуры восьмиугольник, по образу и подобию, создадим div с ID=»octagon».

<div id="octagon"></div>

1	<div id="octagon"></div>

Код CSS.
Чтобы увидеть восьмиугольник, создадим две трапециевидные формы и по бокам расположим два треугольника.

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

#octagon:before {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}

#octagon:after {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}    
}

#octagon {

width: 100px;

height: 100px;

background: #ac60ec;

position: relative;

}

#octagon:before {

content: "";

width: 42px;

height: 0;

position: absolute;

top: 0;

left: 0;

border-bottom: 29px solid #ac60ec;

border-left: 29px solid #f4f4f4;

border-right: 29px solid #f4f4f4;

}

#octagon:after {

content: "";

width: 42px;

height: 0;

position: absolute;

bottom: 0;

left: 0;

border-top: 29px solid #ac60ec;

border-left: 29px solid #f4f4f4;

border-right: 29px solid #f4f4f4;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/mdxwZzv"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Сердце

Код HTML.
Для создания фигуры «сердце», впишем div с ID=»heart».

<div id="heart"></div>

1	<div id="heart"></div>

Код CSS.
Сердце можно отобразить с помощью вращения элементов под разными углами. Потребуется смена значений свойства «transform-origin» для изменения позиции вращаемых элементов.

#heart {
    position: relative;
}

#heart:before,#heart: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%;
}

#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%;
}

#heart {

position: relative;

}

#heart:before,#heart: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%;

}

#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%;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/poLwXYE"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Яйцо

Код HTML.
Для обозначения фигуры яйцо, создадим div с ID=»egg».

<div id="egg"></div>

1	<div id="egg"></div>

Код CSS.
Яйцо похоже на овал. Но в данном случае height должно быть больше, чем width. С помощью подбора значений для «radius» можно получить требуемый результат.

#egg {
    width: 136px;
    height: 190px;
    background: #007AAE;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

#egg {

width: 136px;

height: 190px;

background: #007AAE;

display: block;

-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/VwXWJNV"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

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

Код HTML.
Для создания фигуры «бесконечность», впишем div с ID=»infinity».

<div id="infinity"></div>

1	<div id="infinity"></div>

Код CSS.
Бесконечность можно отобразить при изменениях свойства «border» и задания углов окружности:

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

#infinity:before,#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    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);
}

#infinity {

width: 220px;

height: 100px;

position: relative;

}

#infinity:before,#infinity:after {

content: "";

width: 60px;

height: 60px;

position: absolute;

top: 0;

left: 0;

border: 20px solid #06c999;

-moz-border-radius: 50px 50px 0;

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

}

See the Pen <a href="https://codepen.io/HoboBo/pen/poLwXXN"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Бабл (облачко) для комментария

Код HTML.
Для создания облачка для комментария надо всё так же написать div с ID=»comment_bubble».

<div id="comment_bubble"></div>

1	<div id="comment_bubble"></div>

Код CSS.

#comment_bubble {
    width: 140px;
    height: 100px;
    background: #94D8F6;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    margin-left:30px;
}

#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #94D8F6;
    border-bottom: 13px solid transparent;
}

#comment_bubble {

width: 140px;

height: 100px;

background: #94D8F6;

position: relative;

-moz-border-radius: 12px;

-webkit-border-radius: 12px;

border-radius: 12px;

margin-left:30px;

}

#comment_bubble:before {

content: "";

width: 0;

height: 0;

right: 100%;

top: 38px;

position: absolute;

border-top: 13px solid transparent;

border-right: 26px solid #94D8F6;

border-bottom: 13px solid transparent;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/VwXWJoq"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Pacman

Код HTML.
Для создания фигуры пакман напишем div с ID=»pacman».

<div id="pacman"></div>

1	<div id="pacman"></div>

Код CSS.

#pacman {
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #09EB88;
    border-left: 70px solid #09EB88;
    border-bottom: 70px solid #09EB88;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}

#pacman {

width: 0;

height: 0;

border-right: 70px solid transparent;

border-top: 70px solid #09EB88;

border-left: 70px solid #09EB88;

border-bottom: 70px solid #09EB88;

border-top-left-radius: 70px;

border-top-right-radius: 70px;

border-bottom-left-radius: 70px;

border-bottom-right-radius: 70px;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/BarZXay"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Лупа

Код HTML.

<div id="lupa"></div>

1	<div id="lupa"></div>

Код CSS.

#lupa {
font-size: 10em;
width: 0.3em; 
height: 0.3em; 
margin-bottom: 20px;
border: 0.1em solid #070CF5;
position: relative;
border-radius: 50%;
}
#lupa:before {
content: "";
width: 0.3em; 
height: 0.08em;
position: absolute; 
right: -0.25em; 
bottom: -0.1em;
background: #070CF5;
transform: rotate(45deg);
}

#lupa {

font-size: 10em;

width: 0.3em;

height: 0.3em;

margin-bottom: 20px;

border: 0.1em solid #070CF5;

position: relative;

border-radius: 50%;

}

#lupa:before {

content: "";

width: 0.3em;

height: 0.08em;

position: absolute;

right: -0.25em;

bottom: -0.1em;

background: #070CF5;

transform: rotate(45deg);

}

See the Pen <a href="https://codepen.io/HoboBo/pen/WNzOVQx"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Флажок

Код HTML.

<div id="flag"></div>

1	<div id="flag"></div>

Код CSS.

#flag {
width: 0; 
height: 0; 
border-width: 50px 30px 20px;
border-style: solid;
border-color: #E95557 #E95557 transparent;
}

#flag {

width: 0;

height: 0;

border-width: 50px 30px 20px;

border-style: solid;

border-color: #E95557 #E95557 transparent;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/ExEXqKL"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Крест

Код HTML.

<div id="cross"></div>

1	<div id="cross"></div>

Код CSS.

#cross {
background: #FFC000;
height: 100px; 
width: 20px;
position: relative; 
left: 40px;
}
#cross:after {
content: "";
height: 20px; 
width: 100px;
background: #CD6D45;
position: absolute; 
left: -40px; 
top: 40px;
}

#cross {

background: #FFC000;

height: 100px;

width: 20px;

position: relative;

left: 40px;

}

#cross:after {

content: "";

height: 20px;

width: 100px;

background: #CD6D45;

position: absolute;

left: -40px;

top: 40px;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/XWEgvNE"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Стрелка

Код HTML.

<div id="arrow"></div>

1	<div id="arrow"></div>

Код CSS.

#arrow {
width: 60px; 
height: 20px; 
margin: 20px 0;
background: #0AF9F6;
position: relative;
}
#arrow:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
top: -10px; 
left: 100%;
border-width: 20px 0 20px 40px;
border-style: solid;
border-color: transparent #B74388;
}

#arrow {

width: 60px;

height: 20px;

margin: 20px 0;

background: #0AF9F6;

position: relative;

}

#arrow:after {

content: "";

width: 0;

height: 0;

position: absolute;

top: -10px;

left: 100%;

border-width: 20px 0 20px 40px;

border-style: solid;

border-color: transparent #B74388;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/dymRxNr"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Конвертик или домик

Код HTML.

<div id="envelope"></div>

1	<div id="envelope"></div>

Код CSS.

#envelope {
height: 55px; 
width: 100px; 
margin: 45px 20px 0 0;
background: #C8EBFA;
position: relative;
}
#envelope:before {
content: "";
height: 0; 
width: 0;
position: absolute; 
left: 0; 
top: -35px;
border-bottom: 35px solid #B1BA5C;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

#envelope {

height: 55px;

width: 100px;

margin: 45px 20px 0 0;

background: #C8EBFA;

position: relative;

}

#envelope:before {

content: "";

height: 0;

width: 0;

position: absolute;

left: 0;

top: -35px;

border-bottom: 35px solid #B1BA5C;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/eYMRqWV"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Полумесяц

Код HTML.

<div id="demilune"></div>

1	<div id="demilune"></div>

Код CSS.

#demilune {
width: 100px; 
height: 100px; 
margin: -20px 0 20px 0;
border-radius: 50%;
box-shadow: 15px 15px 0 0 #FFFF00;
}

#demilune {

width: 100px;

height: 100px;

margin: -20px 0 20px 0;

border-radius: 50%;

box-shadow: 15px 15px 0 0 #FFFF00;

}

See the Pen <a href="https://codepen.io/HoboBo/pen/wvmeVqW"> Untitled</a> by Artem (<a href="https://codepen.io/HoboBo">@HoboBo</a>) on <a href="https://codepen.io">CodePen</a>.

Как видите, есть масса возможностей создавать различные фигуры при помощи CSS3. Это прекрасное решение можно использовать в дизайне сайта для ускорения его работы.

4 Comments

Иван:
2022-08-02

Хорошая подборочка фигур на CSS. Добавил в закладки!

Ответить
1. Hobo:
  2022-08-02
  
  Супер. Спасибо за внимание!
  
  Ответить
Наталья Наталья:
2024-08-21

Спасибо. Мой сын с удовольствием так создает фигуры. А по старинке их учить не заставишь!

Ответить
1. Hobo:
  2024-08-24
  
  Да, много интересного появилось в последние годы!
  
  Ответить

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

Оглавление

Окружность

Квадрат

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

Овал

Треугольник

Треугольник, направленный вершиной вниз

Треугольник, направленный вершинкой влево

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

Ромб

Ещё один ромб

Трапеция

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

Звезда

Шестиконечная звезда

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

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

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

Сердце

Яйцо

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

Бабл (облачко) для комментария

Pacman

Лупа

Флажок

Крест

Стрелка

Конвертик или домик

Полумесяц

Об авторе: Hobo

4 Comments

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

Оглавление

Окружность

Квадрат

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

Овал

Треугольник

Треугольник, направленный вершиной вниз

Треугольник, направленный вершинкой влево

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

Ромб

Ещё один ромб

Трапеция

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

Звезда

Шестиконечная звезда

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

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

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

Сердце

Яйцо

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

Бабл (облачко) для комментария

Pacman

Лупа

Флажок

Крест

Стрелка

Конвертик или домик

Полумесяц

Почитайте похожие материалы

Асинхронная отправка электронных писем

SMTP Error: Could not connect to SMTP host

Об авторе: Hobo

4 Comments

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