Hobo
Последнее бновение - 15 января 2023 в 15:02
Сегодня, благодаря возможностям языка описания внешнего вида HTML-документа, имеется возможность создавать самые разнообразные геометрические фигуры на чистом CSS. Каскадные таблицы стилей позволяют получить и квадрат, и круг, и треугольник, стрелку, звезду и даже цветок или сердечко, а также много других фигур.
Содержание:
- Окружность
- Квадрат
- Прямоугольник
- Овал
- Треугольник
- Треугольник, направленный вершиной вниз
- Треугольник, направленный вершинкой влево
- Треугольник, направленный вправо
- Ромб
- Ещё один ромб
- Трапеция
- Параллелограмм
- Звезда
- Шестиконечная звезда
- Пятиугольник
- Шестиугольник
- Восьмиугольник
- Сердце
- Яйцо
- Бесконечность
- Бабл (облачко) для комментария
- Pacman
- Лупа
- Флажок
- Крест
- Стрелка
- Конвертик или домик
- Полумесяц
Совсем не обязательно, к примеру, рисовать прямоугольник в Photoshop или другом графическом редакторе, чтобы использовать изображение в дизайне сайта. Его можно отобразить при помощи кода CSS. По-моему, это отличное решение, поскольку большое количество картинок замедляет работу сайта.
При помощи CSS и HTML возможно создавать не только статичные фигуры. Им можно придавать движение. Посмотрите, например, как сделать анимацию стрелки-маятника. Или как украсить свой сайт новогодней мигающей гирляндой на HTML и CSS.
В этой подборке будут представлены результаты работы кода при создании некоторых распространённых геометрических фигур. Это удобно при создании баннеров и других элементов в дизайне сайта.
Окружность
Чтобы создать окружность с помощью CSS, воспользуемся тегом div. И зададим значение «circle» для идентификатора.
Код HTML
|
1 |
<div id="circle"></div> |
Код CSS
Для CSS необходимо задать значения «width» и «height». Значение для border radius задаём равным половине от «width» и «height».
|
1 2 3 4 5 6 7 8 |
#circle { width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } |
Квадрат
Код HTML.
Как и в предыдущем примере, возьмём тег div с идентификатором «square».
|
1 |
<div id="square"></div> |
Код CSS.
Для создания квадрата в CSS, значения «width» и «height» должны быть равны друг другу.
|
1 2 3 4 5 |
#square { width: 120px; height: 120px; background: #00B0F0; } |
Прямоугольник
Код HTML.
|
1 |
<div id="rectangle"></div> |
Код CSS.
Здесь действуем почти так же, как и при создании квадрата, однако теперь «width» должно быть больше, чем «height».
|
1 2 3 4 5 |
#rectangle { width: 220px; height: 120px; background: #B21016; } |
Овал
Код HTML.
Для создания овала в CSS, зададим div с ID, равным «oval».
|
1 |
<div id="oval"></div> |
Код CSS.
Овал напоминает окружность. Зададим радиус, равным половине значения «height».
|
1 2 3 4 5 6 7 8 |
#oval { width: 200px; height: 100px; background: #A349A4; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px; } |
Треугольник
Код HTML.
Чтобы создать треугольник с помощью CSS, укажем div с ID, равным «triangle».
|
1 |
<div id="triangle"></div> |
Код CSS.
Для создания треугольника надо поиграть со свойством «border».
|
1 2 3 4 5 6 7 |
#triangle { width: 0; height: 0; border-bottom: 140px solid #BFB500; border-left: 70px solid transparent; border-right: 70px solid transparent; } |
Треугольник, направленный вершиной вниз
Код HTML.
Давайте попробуем создать перевернутый треугольник вершиной вниз с помощью CSS. Значение идентификатора: «triangle_down».
|
1 |
<div id="triangle_down"></div> |
CSS
Создавая перевернутый треугольник, управляем толщиной границы:
|
1 2 3 4 5 6 7 |
#triangle_down { width: 0; height: 0; border-top: 140px solid #98E0AD; border-left: 70px solid transparent; border-right: 70px solid transparent; } |
Треугольник, направленный вершинкой влево
Код HTML.
Для создания треугольника с вершиной, направленной влево, зададим div с ID «triangle_left».
|
1 |
<div id="triangle_left"></div> |
Код CSS.
|
1 2 3 4 5 6 7 |
#triangle_left { width: 0; height: 0; border-top: 70px solid transparent; border-right: 140px solid #511252; border-bottom: 70px solid transparent; } |
Треугольник, направленный вправо
Код HTML.
В месте, где должен отображаться треугольник с вершиной, направленной вправо, напишем div с ID=»triangle_right».
|
1 |
<div id="triangle_right"></div> |
Код CSS.
|
1 2 3 4 5 6 7 |
#triangle_right { width: 0; height: 0; border-top: 70px solid transparent; border-left: 140px solid #E5DD4C; border-bottom: 70px solid transparent; } |
Ромб
Код HTML.
Для создания ромба создадим div с ID=»rhomb».
|
1 |
<div id="rhomb"></div> |
Код CSS.
Здесь, при создании ромба, используется свойство «transform» совместно со значениями «rotate». Отображаются два треугольника, образуя ромб.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#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; } |
Ещё один ромб
|
1 |
<div id="diamond"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#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; } |
Трапеция
Код HTML.
Для трапеции, напишем div с ID=»trapezium».
|
1 |
<div id="trapezoid"></div> |
Код CSS.
|
1 2 3 4 5 6 7 |
#trapezoid { height: 0; width: 120px; border-bottom: 120px solid #808080; border-left: 60px solid transparent; border-right: 60px solid transparent; } |
Параллелограмм
Код HTML.
Всё как обычно, для обозначения фигуры параллелограмм, зададим div с ID=»parallelogram».
|
1 |
<div id="parallelogram"></div> |
Код CSS.
Для отображения параллелограмма надо установить значение skew для transform с поворотом элемента на угол в 30 градусов.
|
1 2 3 4 5 6 7 8 9 10 |
#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; } |
Звезда
Код HTML.
Чтобы создать звезду, напишем div с ID=»star».
|
1 |
<div id="star"></div> |
Код CSS.
При создании звезды используем свойства transform равным rotate.
|
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 |
#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); } |
Шестиконечная звезда
Код HTML.
|
1 |
<div id="star_six_points"></div> |
Код CSS.
Шестиконечная звезда создается с помощью свойства border.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#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; } |
Пятиугольник
Код HTML.
Для пятиугольника создадим div с ID=»pentagon».
|
1 |
<div id="pentagon"></div> |
Код CSS.
Создать пятиугольник можно запросто при помощи двух элементов: трапеции и треугольника.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#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; } |
Шестиугольник
Код HTML.
Для отображения шестиугольника создадим div с ID=»hexagon».
|
1 |
<div id="hexagon"></div> |
Код CSS.
|
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 |
#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; } |
Восьмиугольник
Код HTML.
Для фигуры восьмиугольник, по образу и подобию, создадим div с ID=»octagon».
|
1 |
<div id="octagon"></div> |
Код CSS.
Чтобы увидеть восьмиугольник, создадим две трапециевидные формы и по бокам расположим два треугольника.
|
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 |
#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; } } |
Сердце
Код HTML.
Для создания фигуры «сердце», впишем div с ID=»heart».
|
1 |
<div id="heart"></div> |
Код CSS.
Сердце можно отобразить с помощью вращения элементов под разными углами. Потребуется смена значений свойства «transform-origin» для изменения позиции вращаемых элементов.
|
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; } #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%; } |
Яйцо
Код HTML.
Для обозначения фигуры яйцо, создадим div с ID=»egg».
|
1 |
<div id="egg"></div> |
Код CSS.
Яйцо похоже на овал. Но в данном случае height должно быть больше, чем width. С помощью подбора значений для «radius» можно получить требуемый результат.
|
1 2 3 4 5 6 7 8 |
#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%; } |
Бесконечность
Код HTML.
Для создания фигуры «бесконечность», впишем div с ID=»infinity».
|
1 |
<div id="infinity"></div> |
Код CSS.
Бесконечность можно отобразить при изменениях свойства «border» и задания углов окружности:
|
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 |
#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); } |
Бабл (облачко) для комментария
Код HTML.
Для создания облачка для комментария надо всё так же написать div с ID=»comment_bubble».
|
1 |
<div id="comment_bubble"></div> |
Код CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#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; } |
Pacman
Код HTML.
Для создания фигуры пакман напишем div с ID=»pacman».
|
1 |
<div id="pacman"></div> |
Код CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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; } |
Лупа
Код HTML.
|
1 |
<div id="lupa"></div> |
Код CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#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); } |
Флажок
Код HTML.
|
1 |
<div id="flag"></div> |
Код CSS.
|
1 2 3 4 5 6 7 |
#flag { width: 0; height: 0; border-width: 50px 30px 20px; border-style: solid; border-color: #E95557 #E95557 transparent; } |
Крест
Код HTML.
|
1 |
<div id="cross"></div> |
Код CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#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; } |
Стрелка
Код HTML.
|
1 |
<div id="arrow"></div> |
Код CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#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; } |
Конвертик или домик
Код HTML.
|
1 |
<div id="envelope"></div> |
Код CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#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; } |
Полумесяц
Код HTML.
|
1 |
<div id="demilune"></div> |
Код CSS.
|
1 2 3 4 5 6 7 |
#demilune { width: 100px; height: 100px; margin: -20px 0 20px 0; border-radius: 50%; box-shadow: 15px 15px 0 0 #FFFF00; } |
Как видите, есть масса возможностей создавать различные фигуры при помощи CSS3. Это прекрасное решение можно использовать в дизайне сайта для ускорения его работы.
Хорошая подборочка фигур на CSS. Добавил в закладки!
Супер. Спасибо за внимание!