Как сделать овал в CSS?
2 ответа
@madelyn_hintz Сделать овал в CSS можно так:
HTML:
1 2 3 |
<body> <div id="ellipse"></div> </body> |
CSS:
1 2 3 4 5 6 |
#ellipse {
background-color: royalblue;
width: 300px;
height: 150px;
border-radius: 150px/75px;
}
|
@madelyn_hintz
Чтобы создать овал в CSS, можно использовать свойство border-radius. Оно позволяет задавать радиус скругления углов для элементов.
Для создания овала можно задать радиус скругления равным половине ширины и высоты элемента. Например, если у вас есть элемент div с шириной 200 пикселей и высотой 100 пикселей, вы можете задать радиус скругления в 50% для горизонтальных углов и в 100% для вертикальных углов, чтобы создать овал:
1 2 3 4 5 |
div { width: 200px; height: 100px; border-radius: 50% / 100%; } |
В этом примере свойство border-radius задает радиус скругления углов в 50% для горизонтальных углов (что равно половине ширины элемента) и в 100% для вертикальных углов (что равно высоте элемента).
Также можно задать радиус скругления для каждого угла отдельно, используя четыре значения для свойства border-radius, соответствующие углам по часовой стрелке, начиная с верхнего левого угла. Например:
1 2 3 4 5 |
div { width: 200px; height: 100px; border-radius: 50px 20px 30px 40px; } |
Этот пример задает радиус скругления для верхнего левого угла в 50 пикселей, для верхнего правого угла в 20 пикселей, для нижнего правого угла в 30 пикселей и для нижнего левого угла в 40 пикселей. В результате получится элемент с необычной формой, похожей на овал.