Геометричні фігури на CSS
Привіт:) У цьому пості покажу як створювати геометричні фігури на CSS без допомоги сторонніх бібліотек та плагінів.
- Квадрат
- Прямокутник
- Коло
- Овал
- Трикутник (вгору)
- Трикутник (донизу)
- Трикутник (вліво)
- Трикутник (вправо)
- Трикутник (вгору вліво)
- Трикутник (вгору вправо)
- Трикутник (донизу вліво)
- Трикутник (донизу вправо)
- Трапеція
- Паралелограм
- Зірка (6-променева)
- Зірка (5-променева)
- П'ятикутник
- Шестикутник
- Восьмикутник
- Серце
- Нескінченність
- Ромб
- Щит
- Витягнутий ромб
- Зрізаний витягнутий ромб
- Яйце
- Пакман
- Бульбашка для розмов
- RSS Feed
- Зірка (12-променева)
- Зірка (8-променева)
- Інь Янь
- Стрічка значка
- Космічний загарбник
- Екран телевізора
- Шеврон
- Лупа
- Іконка Facebook
- Місяць
- Прапорець
- Конус
- Хрестик
- Основа
- Стрілка-вказівник
- Замок
CSS здатний створювати різноманітні форми. Квадрати і прямокутники — це просто, оскільки вони є природними формами інтернету. Додайте ширину і висоту, й отримаєте прямокутник потрібного розміру. Додайте радіус рамки, і зможете закруглити цю фігуру, перетворити прямокутники на кола та овали.
Також у CSS існують псевдоелементи ::before та ::after
, які мають для створення ще двох фігур, які можна додати до початкового елемента. Попрацювавши з позиціонуванням, трансформацією та багатьма іншими трюками, ми можемо створити безліч фігур за допомогою лише одного HTML-елемента.
Квадрат
<div class="square"></div>
.square {
width: 100px;
height: 100px;
background: red;
}
Прямокутник
<div class="rectangle"></div>
.rectangle {
width: 200px;
height: 100px;
background: red;
}
Коло
<div class="circle"></div>
.circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
}
Овал
<div class="oval"></div>
.oval {
width: 200px;
height: 100px;
background: red;
border-radius: 100px / 50px;
}
Трикутник (вгору)
<div class="triangle-up"></div>
.triangle-up {
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
Трикутник (донизу)
<div class="triangle-down"></div>
.triangle-down {
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
Трикутник (вліво)
<div class="triangle-left"></div>
.triangle-left {
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
Трикутник (вправо)
<div class="triangle-right"></div>
.triangle-right {
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
Трикутник (вгору вліво)
<div class="triangle-topleft"></div>
.triangle-topleft {
width: 0px;
height: 0px;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
Трикутник (вгору вправо)
<div class="triangle-topright"></div>
.triangle-topright {
width: 0px;
height: 0px;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
Трикутник (донизу вліво)
<div class="triangle-bottomleft"></div>
.triangle-bottomleft {
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
Трикутник (донизу вправо)
<div class="triangle-bottomright"></div>
.triangle-bottomright {
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
Трапеція
<div class="trapezoid"></div>
.trapezoid {
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0px;
width: 150px;
}
Паралелограм
<div class="parallelogram"></div>
.parallelogram {
width: 150px;
height: 100px;
transform: skew(20deg);
background: red;
}
Зірка (6-променева)
<div class="star-six"></div>
.star-six {
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
.star-six::after {
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
до змісту ↑Зірка (5-променева)
<div class="star-five"></div>
.star-five {
margin: 50px 0px;
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;
transform: rotate(35deg);
}
.star-five::before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0px;
width: 0px;
top: -45px;
left: -65px;
display: block;
content: "";
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;
transform: rotate(-70deg);
content: "";
}
до змісту ↑П'ятикутник
<div class="pentagon"></div>
.pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0px;
border-style: solid;
border-color: red transparent;
}
.pentagon::before {
content: "";
position: absolute;
height: 0px;
width: 0px;
top: -85px;
left: -18px;
border-width: 0px 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
до змісту ↑Шестикутник
<div class="hexagon"></div>
.hexagon {
width: 100px;
height: 57.735px;
background: red;
position: relative;
}
.hexagon::before {
content: "";
position: absolute;
top: -28px;
left: 0px;
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 28px solid red;
}
.hexagon::after {
content: "";
position: absolute;
bottom: -28px;
left: 0px;
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 28px solid red;
}
до змісту ↑Восьмикутник
<div class="octagon"></div>
.octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
.octagon::before {
content: "";
width: 100px;
height: 0px;
position: absolute;
top: 0px;
left: 0px;
border-bottom: 29px solid red;
border-left: 29px solid #ffffff;
border-right: 29px solid #ffffff;
}
.octagon::after {
content: "";
width: 100px;
height: 0px;
position: absolute;
bottom: 0px;
left: 0px;
border-top: 29px solid red;
border-left: 29px solid #ffffff;
border-right: 29px solid #ffffff;
}
до змісту ↑Серце
<div class="heart"></div>
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart::before,
.heart::after {
position: absolute;
content: "";
left: 50px;
top: 0px;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0px 0px;
transform: rotate(-45deg);
transform-origin: 0px 100%;
}
.heart::after {
left: 0px;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
до змісту ↑Нескінченність
<div class="infinity"></div>
.infinity {
position: relative;
width: 212px;
height: 100px;
box-sizing: content-box;
}
.infinity::before,
.infinity::after {
content: "";
box-sizing: content-box;
position: absolute;
top: 0px;
left: 0px;
width: 60px;
height: 60px;
border: 20px solid red;
border-radius: 50px 50px 0px 50px;
transform: rotate(-45deg);
}
.infinity::after {
left: auto;
right: 0px;
border-radius: 50px 50px 50px 0px;
transform: rotate(45deg);
}
до змісту ↑Ромб
<div class="diamond"></div>
.diamond {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
.diamond::after {
content: "";
position: absolute;
left: -50px;
top: 50px;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top-color: red;
}
до змісту ↑Щит
<div class="diamond-shield"></div>
.diamond-shield {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
.diamond-shield::after {
content: "";
position: absolute;
left: -50px;
top: 20px;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top: 70px solid red;
}
до змісту ↑Витягнутий ромб
<div class="diamond-narrow"></div>
.diamond-narrow {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
.diamond-narrow::after {
content: "";
position: absolute;
left: -50px;
top: 70px;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top: 70px solid red;
}
до змісту ↑Зрізаний витягнутий ромб
<div class="cut-diamond"></div>
.cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0px 25px 25px 25px;
height: 0px;
width: 50px;
box-sizing: content-box;
position: relative;
margin: 20px 0px 50px 0px;
}
.cut-diamond::after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0px;
height: 0px;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0px 50px;
}
до змісту ↑Яйце
<div class="egg"></div>
.egg {
display: block;
width: 126px;
height: 180px;
background-color: red;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Пакман
<div class="pacman"></div>
.pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
до змісту ↑Бульбашка для розмов
<div class="talkbubble"></div>
.talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.talkbubble::before {
content: "";
position: absolute;
right: 100%;
top: 26px;
width: 0px;
height: 0px;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
до змісту ↑RSS Feed
<div class="rss"></div>
.rss {
width: 20em;
height: 20em;
border-radius: 3em;
background-color: #ff0000;
font-size: 14px;
}
.rss::before {
content: "";
z-index: 1;
display: block;
height: 5em;
width: 5em;
background: #ffffff;
border-radius: 50%;
position: relative;
top: 11.5em;
left: 3.5em;
}
.rss::after {
content: "";
display: block;
background: #ff0000;
width: 13em;
height: 13em;
top: -2em;
left: 3.8em;
border-radius: 2.5em;
position: relative;
box-shadow:
-2em 2em 0 0 #ffffff inset,
-4em 4em 0 0 #ff0000 inset,
-6em 6em 0 0 #ffffff inset
}
до змісту ↑Зірка (12-променева)
<div class="burst-12"></div>
.burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
.burst-12::before,
.burst-12::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 80px;
width: 80px;
background: red;
}
.burst-12::before {
transform: rotate(30deg);
}
.burst-12::after {
transform: rotate(60deg);
}
до змісту ↑Зірка (8-променева)
<div class="burst-8"></div>
.burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
transform: rotate(20deg);
}
.burst-8::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 80px;
width: 80px;
background: red;
transform: rotate(135deg);
}
до змісту ↑Інь Янь
<div class="yin-yang"></div>
.yin-yang {
width: 96px;
box-sizing: content-box;
height: 48px;
background: #ffffff;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.yin-yang::before {
content: "";
position: absolute;
top: 50%;
left: 0px;
background: #ffffff;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
box-sizing: content-box;
}
.yin-yang::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #ffffff;
border-radius: 100%;
width: 12px;
height: 12px;
box-sizing: content-box;
}
до змісту ↑Стрічка значка
<div class="badge-ribbon"></div>
.badge-ribbon {
position: relative;
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
}
.badge-ribbon::before,
.badge-ribbon::after {
content: "";
position: absolute;
border-bottom: 70px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
transform: rotate(-140deg);
}
.badge-ribbon::after {
left: auto;
right: -10px;
transform: rotate(140deg);
}
до змісту ↑Космічний загарбник
<div class="space-invader"></div>
.space-invader {
box-shadow: 0px 0px 0px 1em red,
0px 1em 0px 1em red,
-2.5em 1.5em 0px .5em red,
2.5em 1.5em 0px .5em red,
-3em -3em 0px 0px red,
3em -3em 0px 0px red,
-2em -2em 0px 0px red,
2em -2em 0px 0px red,
-3em -1em 0px 0px red,
-2em -1em 0px 0px red,
2em -1em 0px 0px red,
3em -1em 0px 0px red,
-4em 0px 0px 0px red,
-3em 0px 0px 0px red,
3em 0px 0px 0px red,
4em 0px 0px 0px red,
-5em 1em 0px 0px red,
-4em 1em 0px 0px red,
4em 1em 0px 0px red,
5em 1em 0px 0px red,
-5em 2em 0px 0px red,
5em 2em 0px 0px red,
-5em 3em 0px 0px red,
-3em 3em 0px 0px red,
3em 3em 0px 0px red,
5em 3em 0px 0px red,
-2em 4em 0px 0px red,
-1em 4em 0px 0px red,
1em 4em 0px 0px red,
2em 4em 0px 0px red;
background: red;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0px 70px 65px;
}
до змісту ↑Екран телевізора
<div class="tv"></div>
.tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0px;
background: red;
border-radius: 50% / 10%;
color: #ffffff;
text-align: center;
text-indent: .1em;
}
.tv::before {
content: "";
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
до змісту ↑Шеврон
<div class="chevron"></div>
.chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
.chevron::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 51%;
background: red;
transform: skew(0deg, 6deg);
}
.chevron::after {
content: "";
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, -6deg);
}
до змісту ↑Лупа
<div class="magnifying-glass"></div>
.magnifying-glass {
font-size: 10em;
display: block;
margin: 0px;
width: 0.4em;
box-sizing: content-box;
height: 0.4em;
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
.magnifying-glass::before {
content: "";
display: block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0px;
background: red;
width: 0.35em;
height: 0.08em;
transform: rotate(45deg);
}
до змісту ↑Іконка Facebook
<div class="facebook-icon"></div>
.facebook-icon {
background: red;
text-indent: -999em;
width: 100px;
height: 110px;
box-sizing: content-box;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid red;
border-bottom: 0px;
}
.facebook-icon::before {
content: "/20";
position: absolute;
background: red;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #ffffff;
border-radius: 25px;
box-sizing: content-box;
}
.facebook-icon::after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #ffffff;
right: 5px;
box-sizing: content-box;
}
до змісту ↑Місяць
<div class="moon"></div>
.moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0px 0px red;
}
Прапорець
<div class="flag"></div>
.flag {
width: 110px;
height: 56px;
box-sizing: content-box;
padding-top: 15px;
position: relative;
background: red;
color: #ffffff;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
.flag::after {
content: "";
position: absolute;
left: 0px;
bottom: 0px;
width: 0px;
height: 0px;
border-bottom: 13px solid #ffffff;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
до змісту ↑Конус
<div class="cone"></div>
.cone {
width: 0px;
height: 0px;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 100px solid red;
border-radius: 50%;
}
Хрестик
<div class="cross"></div>
.cross {
background: red;
height: 100px;
position: relative;
width: 20px;
}
.cross::after {
background: red;
content: "";
height: 20px;
left: -40px;
position: absolute;
top: 40px;
width: 100px;
}
до змісту ↑Основа
<div class="base"></div>
.base {
background: red;
height: 55px;
position: relative;
width: 100px;
}
.base::before {
border-bottom: 35px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
height: 0px;
left: 0px;
position: absolute;
top: -35px;
width: 0px;
}
до змісту ↑Стрілка-вказівник
<div class="pointer"></div>
.pointer {
width: 200px;
height: 40px;
position: relative;
background: red;
}
.pointer::after {
content: "";
position: absolute;
left: 0px;
bottom: 0px;
width: 0px;
height: 0px;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.pointer::before {
content: "";
position: absolute;
right: -20px;
bottom: 0px;
width: 0px;
height: 0px;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
до змісту ↑Замок
<div class="lock"></div>
.lock {
font-size: 8px;
position: relative;
width: 18em;
height: 13em;
border-radius: 2em;
box-sizing: border-box;
border: 3.5em solid red;
border-right-width: 7.5em;
border-left-width: 7.5em;
}
.lock::before {
content: "";
box-sizing: border-box;
position: absolute;
border: 2.5em solid red;
width: 14em;
height: 12em;
left: 50%;
margin-left: -7em;
top: -12em;
border-top-left-radius: 7em;
border-top-right-radius: 7em;
}
.lock::after {
content: "";
box-sizing: border-box;
position: absolute;
border: 1em solid red;
width: 5em;
height: 8em;
border-radius: 2.5em;
left: 50%;
top: -1em;
margin-left: -2.5em;
}
Джерело: https://css-tricks.com/the-shapes-of-css/