Метки: CSS / Как сделать
В этой статье мы разберём как сделать фигуру в CSS, будет очень интересно.
Ещё посмотрите статью «Снеговик на простом CSS», там тоже нужны навыки для создания фигур.
Так же скажу, что материал для этой статьи мы взяли сайта Хабр.
Простые фигуры:
Сначала я покажу как сделать совсем простые фигуры, я даже описывать не чего не буду, но потом перейдём к более сложным.
Квадрат:
1 2 3 4 5 | #square { width: 100px; height: 100px; background: red; } |
Прямоугольник:
Прямоугольник тоже самое, что и квадрат, только не много вытягиваем.
1 2 3 4 5 | #rectangle { width: 200px; height: 100px; background: red; } |
Круг:
Это тот же квадрат, только с круглёнными краями.
1 2 3 4 5 6 7 8 | #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } |
Овал:
1 2 3 4 5 6 7 8 | #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } |
Треугольник вверх:
Теперь перейдём к самому интересному на мой взгляд, к треугольникам, суть их создания будет в том, что мы изменяем рамки так как нам надо.
1 2 3 4 5 6 7 | #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } |
Треугольник вниз:
1 2 3 4 5 6 7 | #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } |
Треугольник налево:
1 2 3 4 5 6 7 | #triangle { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } |
Треугольник направо:
1 2 3 4 5 6 7 | #triangle { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; } |
Треугольник в левом верхнем углу:
1 2 3 4 5 6 | #triangle { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; } |
Треугольник в правом верхнем углу:
1 2 3 4 5 6 | #triangle { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; } |
Треугольник в левом нижнем углу:
1 2 3 4 5 6 | #triangle { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; } |
Треугольник в правом нижнем углу:
1 2 3 4 5 6 | #triangle { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; } |
Параллелограмм:
Последние что осталось разобрать из простых фигур, это параллелограмм и трапецию.
1 2 3 4 5 6 7 8 | #parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; } |
Трапеция:
1 2 3 4 5 6 7 | #trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } |
Сложные фигуры на CSS:
Теперь перейдём к более сложным фигурам, я покажу как сделать звёзды, многоугольники и сердечко.
Звезда (6-конечная):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #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-конечная):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | #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: ''; } |
Пятиугольник:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #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; } |
Шестиугольник:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | #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; } |
Восьмиугольник:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | #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; } |
Сердечко:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | #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%; } |
Вывод:
В этой статье мы разобрали как сделать фигуру в CSS, от простых, до сложных, также рекомендую вам сделать каждую из представленных фигур, и побаловаться со стилями, чтобы точно знать что и как влияет.
Подписываетесь на соц-сети:
Оценка:
Количество оценивших: 1
Средняя оценка: 5,00
Средняя оценка: 5,00
Загрузка...Также рекомендую:
Подписаться
0 комментариев