Как сделать овал в css
Перейти к содержимому

Как сделать овал в css

  • автор:

CSS фигуры: 15+ примеров

CSS фигуры 15+ примеров

В этой статье приведены примеры того, как можно при помощи CSS сделать различные геометрические фигуры: треугольники, параллелограммы, ромбы, «диалоговые пузыри» и многое другое.

  1. Свойство border-radius
  2. Круг
  3. Овалы/Эллипсы
  4. Треугольники
  5. Квадраты и прямоугольники
  6. Параллелограммы
  7. Бриллианты
  8. Трапеции
  9. Пятиугольники
  10. Шестиугольники
  11. Звезды
  12. Диалоговые облачка
  13. Другие фигуры

Свойство border-radius

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

Свойство border-radius позволяет одновременно закруглять все углы HTML элементов. Если вы зададите два значения для свойства border-radius , то первое значение будет закруглять верхний левый и нижний правый углы, а второе — верхний правый и нижний левый углы. В качестве значений можно использовать любые единицы измерения (px, em, % и т.п.).

Используя свойства border-top-left-radius , border-top-right-radius , border-bottom-left-radius и border-bottom-right-radius , вы можете закруглять каждый угол отдельно.

Значения, разделенные символом косой черты (/), определяют горизонтальный и вертикальный радиусы.

Ниже приведены несколько примеров фигур с разными радиусами рамок.

border-radius

 .shape1 < border-radius: 15px; >.shape2 < border-top-left-radius: 15px; >.shape3 < border-top-right-radius: 15px; >.shape4 < border-bottom-left-radius: 15px; >.shape5 < border-bottom-right-radius: 15px; >.shape6 < border-radius: 0 0 15px 15px; >.shape7 < border-radius: 15px 15px 0 0; >.shape8 < border-radius: 0 10px 20px; >.shape9 < border-radius: 10px 20px; >.shape10 < border-radius: 10px/20px; >.shape11 < border-radius: 5px 10px 15px 30px/30px 15px 10px 5px; >.shape12 < border-radius: 10px 20px 30px 40px/30px; >.shape

Следующий онлайн-инструмент довольно наглядно позволяет поэкспериментировать с радиусами рамок элемента.

Круг

Круг — это простейшая CSS фигура. Задайте свойство border-radius: 50%; для элемента с одинаковой шириной и высотой, и вы получите круг.

CSS круг

 .circle

Свойство border-top-left-radius , border-top-right-radius , border-bottom-left-radius или border-bottom-right-radius со значением 100% создаст четверть круга.

Овалы/Эллипсы

Овалы создаются так же, как круги. Единственное отличие заключается в том, что ширина овала должна отличаться от его высоты.

CSS эллипс

 .ellipse

Полуэллипс

Чтобы создать полуэллипсы, используйте наборы значений, разделенных символом косой черты (/), для определения горизонтального и вертикального радиусов. Если вы зададите 50% перед символом косой черты, то получится вертикальный полуэллипс. А если вы зададите 50% после символа косой черты, то получится горизонтальный полуэллипс. Комбинации значений 0 и 100% определяют направление полуэллипса.

CSS полуэллипсы

 .half-ellipse1 < border-radius: 50% / 100% 100% 0 0; >.half-ellipse2 < border-radius: 50% / 0 0 100% 100%; >.half-ellipse3 < border-radius: 100% 0 0 100% / 50%; >.half-ellipse4 < border-radius: 0 100% 100% 0 / 50%; >.half-ellipse

Четверть эллипса

Чтобы создать четверть эллипса, используйте комбинации значений 0 и 100%.

CSS четверть эллипса

 .quarter-ellipse1 < border-radius: 100% 0 0 0; >.quarter-ellipse2 < border-radius: 0 100% 0 0; >.quarter-ellipse3 < border-radius: 0 0 100% 0; >.quarter-ellipse4 < border-radius: 0 0 0 100%; >.quarter-ellipse

А вот так можно создать конус:

CSS конус

 .cone

Треугольники

CSS треугольники полезны для создания стрелок, например, в элементе выбора или внутри кнопок.

CSS треугольники

Чтобы создать треугольник, для начала нужно определить элемент с нулевыми шириной и высотой:

 .triangle

Фактическая ширина и высота стрелки определяются шириной рамки. Например, при стрелке, направленной вверх, нижняя рамка имеет цвет, а левая и правая прозрачны, что и создает треугольник.

 .triangle-up < border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #32557f; >.triangle-down < border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #32557f; >.triangle-left < border-top: 50px solid transparent; border-right: 100px solid #32557f; border-bottom: 50px solid transparent; >.triangle-right

Чтобы создать прямоугольный треугольник, задайте цвет для верхней или нижней рамки, а правую или левую рамку оставьте прозрачной.

CSS прямоугольные треугольники

 .triangle-top-left < border-top: 100px solid #32557f; border-right: 100px solid transparent; >.triangle-top-right < border-top: 100px solid #32557f; border-left: 100px solid transparent; >.triangle-bottom-left < border-bottom: 100px solid #32557f; border-right: 100px solid transparent; >.triangle-bottom-right

Стрелки

Чтобы создать простую стрелку без хвостовика, создайте элемент, задайте ему ширину, высоту и рамку. При этом значения левой и верхней рамки должны быть нулевыми.

CSS стрелки

 .arrow

Чтобы стрелка была направлена вверх, добавьте свойство transform: rotate(225deg); , а чтобы стрелка была направлена вниз, добавьте свойство transform: rotate(45deg); . Это повернет стрелку на 225 и 45 градусов соответственно.

 .arrow-up < transform: rotate(225deg); >.arrow-down

Вы также можете создать изогнутую стрелку с хвостиком:

CSS изогнутая стрелка с хвостиком

 .arrow-curved < position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid #32557f; transform: rotate(10deg); >.arrow-curved:after

А так можно создать стрелку-указатель:

CSS стрелка-указатель

 .arrow-pointer < width: 250px; height: 50px; background: #32557f; position: relative; >.arrow-pointer:after < content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: 25px solid #ffffff; border-top: 25px solid transparent; border-bottom: 25px solid transparent; >.arrow-pointer:before

Квадраты и прямоугольники

Чтобы создать квадрат, создайте элемент с одинаковыми значениями ширины и высоты. Для прямоугольника сделайте ширину больше его высоты. Это довольно просто.

CSS квадрат и прямоугольник

 .square < width: 100px; height: 100px; background: #32557f; >.rectangle

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

Чтобы создать параллелограмм, создайте прямоугольник, как показано выше, и добавьте свойство transform: skew(20deg); . Вы можете выбрать свои градусы наклона, чтобы сделать параллелограмм более или менее выраженным.

CSS параллелограмм

 .parallelogram

Бриллианты

CSS бриллианты

 .diamond1 < width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #32557f; position: relative; top: -50px; >.diamond1::after < content: ''; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: #32557f; >.diamond2 < width: 0; height: 0; border: 50px solid transparent; border-bottom: 70px solid #32557f; position: relative; top: -50px; >.diamond2::after < content: ''; position: absolute; left: -50px; top: 70px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid #32557f; >.diamond3 < width: 0; height: 0; border: 50px solid transparent; border-bottom: 20px solid #32557f; position: relative; top: -50px; >.diamond3::after < content: ''; position: absolute; left: -50px; top: 20px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid #32557f; >.diamond4 < border-style: solid; border-color: transparent transparent #32557f transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; box-sizing: content-box; position: relative; margin: 20px 0 50px 0; >.diamond4::after

Трапеции

CSS трапеция

 .trapezoid

Свойство width определяет ширину трапеции, а свойство border-bottom определяет ее высоту. Свойства border-left и border-right полезны для определения углов трапеции.

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

Пятиугольник — это многоугольник с пятью сторонами.

CSS пятиугольник

 .pentagon < position: relative; width: 54px; box-sizing: content-box; border-width: 50px 18px 0; border-style: solid; border-color: #32557f transparent; >.pentagon::before

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

Шестиугольник — это многоугольник с шестью сторонами.

CSS шестиугольник

 .hexagon < width: 100px; height: 55px; background: #32557f; 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 #32557f; >.hexagon::after

Звезды

CSS звезды

 .star-five < position: relative; display: block; width: 0px; height: 0px; margin: 50px 0; color: #32557f; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 70px solid #32557f; transform: rotate(35deg); >.star-five::before < content: ''; position: absolute; top: -45px; left: -65px; display: block; height: 0; width: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 80px solid #32557f; transform: rotate(-35deg); >.star-five::after
 .star-six < width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #32557f; position: relative; >.star-six::after
 .star-eight < background: #32557f; width: 80px; height: 80px; position: relative; text-align: center; transform: rotate(20deg); >.star-eight::before
 .star-twelve < background: #32557f; width: 80px; height: 80px; position: relative; text-align: center; >.star-twelve::before, .star-twelve::after < content: ''; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: #32557f; >.star-twelve::before < transform: rotate(30deg); >.star-twelve::after

Диалоговые облачка

CSS диалоговые облачка

 .bubble < position: relative; width: 120px; height: 80px; background: #32557f; border-radius: 10px; >.bubble1::before < content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 0; border: 13px solid transparent; border-right-color: #32557f; border-left: 0; margin-top: -13px; margin-left: -13px; >.bubble2::after < content: ''; position: absolute; right: 0; top: 50%; width: 0; height: 0; border: 13px solid transparent; border-left-color: #32557f; border-right: 0; margin-top: -13px; margin-right: -13px; >.bubble3::after < content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 0; border: 13px solid transparent; border-bottom-color: #32557f; border-top: 0; margin-left: -13px; margin-top: -13px; >.bubble4::after

Диалоговые облачка с рамкой

CSS диалоговые облачка с рамкой

 .bubble5 < position: relative; width: 280px; height: 80px; padding: 5px; color: #32557f; border-radius: 5px; border: 3px solid #32557f; >.bubble5::before, .bubble5::after < content: '\0020'; display: block; position: absolute; top: -15px; left: 15px; z-index: 2; width: 0; height: 0; overflow: hidden; border: solid 15px transparent; border-top: 0; border-bottom-color: #7eb4e2; >.bubble5::before

Чтобы сделать диалоговое облачко с тенью, добавьте дополнительный элемент div:

 .bubble6 < position: relative; width: 280px; height: 80px; background: #efefef; border: 1px solid #a7a7a7; border-radius: 4px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .2); padding: 15px; >.bubble6-arrow < position: absolute; right: 15px; bottom: -25px; border-left: 21px solid transparent; border-top: 20px solid rgba(0, 0, 0, .2); >.bubble6-arrow::before < content: ''; position: absolute; right: 5px; bottom: 2px; border-left: 23px solid transparent; border-top: 23px solid #a7a7a7; >.bubble6-arrow::after

Другие фигуры

Скобки

CSS скобки

 .brackets < width: 100px; height: 100px; border: 5px solid #32557f; border-top: none; border-bottom: none; border-radius: 30px/90px; >

Крест

CSS крест

 .cross < background: #32557f; height: 50px; position: relative; width: 10px; >.cross::after

Яйцо

CSS яйцо

Флаг

CSS флаг

 .flag < width: 110px; height: 56px; box-sizing: content-box; padding-top: 15px; position: relative; background: #32557f; color: #7eb4e2; font-size: 11px; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; >.flag::after

Сердце

CSS сердце

 .heart < position: relative; width: 120px; height: 100px; >.heart::before, .heart::after < position: absolute; content: ''; left: 60px; top: 0; width: 60px; height: 90px; background: #32557f; border-radius: 60px 60px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; >.heart::after

Символ бесконечности

CSS символ бесконечности

 .infinity < position: relative; width: 106px; height: 50px; box-sizing: content-box; >.infinity::before, .infinity::after < content: ''; box-sizing: content-box; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border: 10px solid #32557f; border-radius: 50px 50px 0 50px; transform: rotate(-45deg); >.infinity::after

Листья

CSS листья

 .leaf < width: 100px; height: 100px; border: 5px solid #32557f; >.leaf1 < border-radius: 0 100%; >.leaf2

Замок

CSS замок

 .lock < font-size: 4px; position: relative; top: 10em; width: 18em; height: 13em; border-radius: 2em; box-sizing: border-box; border: 3.5em solid #32557f; border-right-width: 7.5em; border-left-width: 7.5em; >.lock::before < content: ''; box-sizing: border-box; position: absolute; top: -12em; left: 50%; width: 14em; height: 12em; margin-left: -7em; border: 2.5em solid #32557f; border-top-left-radius: 7em; border-top-right-radius: 7em; >.lock::after

Увеличительное стекло

CSS увеличительное стекло

 .magnifying-glass < font-size: 5em; display: inline-block; width: 0.4em; box-sizing: content-box; height: 0.4em; border: 0.1em solid #32557f; position: relative; border-radius: 0.35em; >.magnifying-glass::before

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

Как сделать овал в css

Если вы нажмете кнопку «Сохранить», ваш код будет сохранен и вы получите URL, с который вы можете поделиться с другими.

Нажав кнопку «Сохранить», вы соглашаетесь с нашим правила и условия.

Все коды в общих файлах предоставляется пользователями и принадлежат объявлениям.

Все общие файлы становятся общедоступными. Лицензия не применяется.

Любой код может быть удален без предупреждения (если он считается оскорбительным, поврежденным или по любая другая причина).

schoolsw3.com не несет ответственности за любые утраты или повреждения любого рода во время использования предоставленного кода.

Не удалось сохранить код

В коде слишком много символов.

Ваш код был сохранен

Файл был сохранен в:

Сохранить на Google диске

Если у вас есть аккаунт Google, вы можете сохранить этот код на Google диске.

Google попросит вас подтвердить доступ к Google диску.

Сохранить файл на Google диск

Сохранить файл как: Сохранить файл

Открыть файл из Google диска

Если вы сохранили файл на Google диске, вы можете открыть его здесь:

Открыть файл с Google диска

Открыть файл

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

Примеры приведены 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; >

Треугольник вверх

Уже знакомые нам треугольники

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *