Делаем геометрические фигуры на css
CSS способен создавать всевозможные фигуры. Квадраты и прямоугольники легки, поскольку они являются естественными формами сети. Добавьте ширину и высоту, и вы получите нужный вам прямоугольник размера. Добавьте border-radius, и вы можете округлить эту форму, и достаточно, вы можете превратить эти прямоугольники в круги и овалы.
Мы также получаем элементы ::beforeи::after psuedo в CSS, которые дают нам возможность еще двух фигур, которые мы можем добавить к исходному элементу. Умничая с позиционированием, трансформацией и многими другими хитростями, мы можем создавать множество фигур в CSS только с одним HTML-элементом.
Круг
Овал
Треугольник вверх
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
Треугольник вниз
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
Треугольник влево
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
Треугольник вправо
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
Треугольник сверху слева
border-top: 100px solid red;
border-right: 100px solid transparent;
Треугольник сверху справа
border-top: 100px solid red;
border-left: 100px solid transparent;
Треугольник внизу слева
border-bottom: 100px solid red;
border-right: 100px solid transparent;
Треугольник внизу справа
border-bottom: 100px solid red;
border-left: 100px solid transparent;
Шестиугольник
CSS фигуры
Очередная порция впечатляющих возможностей CSS — коллекция фигур на чистом CSS. Никаких картинок в Фотошопе и сложной разметки. С помощью псевдоэлементов, рамок и теней можно создавать сложные css-фигуры на основе всего лишь одного html-элемента.
1. Круг
2. Овал
3. Треугольник вершиной вверх
4. Треугольник вершиной вниз
5. Треугольник вершиной влево
6. Треугольник вершиной вправо
7. Верхний левый угол
8. Верхний правый угол
9. Нижний левый угол
10. Нижний правый угол
11. Трапеция
12. Параллелограмм
13. Шестиугольная звезда
.d13 < width: 0; height: 0; margin-bottom: 30px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #374F9C; position: relative; >.d13:after
14. Пятиугольная звезда
.d14 < margin: 50px 0; height: 0; width: 0; position: relative; border-right: 50px solid transparent; border-bottom: 35px solid #E7337A; border-left: 50px solid transparent; transform: rotate(35deg); >.d14:before, .d14:after < content: ""; height: 0; width: 0; position: absolute; >.d14:before < top: -26px; left: -32px; border-bottom: 40px solid #E7337A; border-left: 15px solid transparent; border-right: 15px solid transparent; transform: rotate(-35deg); >.d14:after
15. Стрелка
.d15 < width: 60px; height: 20px; margin: 10px 0; background: #B74388; position: relative; >.d15:after
16. Шестиугольник
.d16 < margin: 20px 0; width: 100px; height: 55px; background: #F1CCAE; position: relative; >.d16:before, .d16:after < content: ""; width: 0; height: 0; position: absolute; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; >.d16:before < top: -25px; border-bottom: 25px solid #F1CCAE; >.d16:after
17. Восьмиугольник
.d17 < width: 100px; height: 100px; background: #54999A; position: relative; >.d17:before, .d17:after < content: ""; width: 42px; height: 0; position: absolute; left: 0; border-left: 29px solid white; border-right: 29px solid white; >.d17:before < top: 0; border-bottom: 29px solid #54999A; >.d17:after
18. Сердце
.d18 < position: relative; width: 100px; height: 80px; >.d18:before, .d18:after < content: ""; position: absolute; left: 50px; top: 0; width: 50px; height: 80px; background: #EE4156; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; >.d18:after
19. Ромб
.d19 < width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #53BA88; position: relative; top: -50px; >.d19:after
20. Ромб
.d20 < margin-bottom: 20px; width: 0; height: 0; border: 50px solid transparent; border-bottom: 70px solid #47002D; position: relative; top: -50px; >.d20:after
21. Символ Инь-Ян
.d21 < width: 100px; height: 50px; background: white; border-color: black; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 50%; position: relative; >.d21:before, .d21:after < content: ""; width: 12px; height: 12px; position: absolute; top: 50%; border-radius: 50%; >.d21:before < left: 0; background: white; border: 19px solid black; >.d21:after
22. Пакман
23. Домик с крышей
.d23 < height: 55px; width: 100px; margin: 35px 20px 0 0; background: #B1BA5C; position: relative; >.d23:before
Геометрические фигуры
Примеры приведены just for fun. Не всегда они имеют практическую ценность, но красиво.
Обычный квадрат
Квадрат является частным случая прямоугольника. Код для прямоугольника приводить не буду.
#square
Круг
#circle
Модификация круга с использованием цвета для границ элемента
.biohazard
Овал
#oval < width: 200px; height: 100px; background: blue; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; >
Треугольник вверх
Уже знакомые нам треугольники
Как сделать — Фигуры
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.