Можно ли создать эллипс с использованием свойства border-radius CSS?

Я пытаюсь сделать прямоугольное изображение (выстрел в голову)

width: 200px;   
height: 280px; 

отображать как эллипс.

Кажется, я не могу остановить его, пытаясь сделать круг, или сформировать точки сверху и снизу, а стороны все еще плоские.

Любая помощь ценится!

+1
источник поделиться
2 ответа

В соответствии со спецификацией, свойства индивидуального border-radius принимают второе значение, которое, если не указано по умолчанию, соответствует первому значению.

3.3 Свойства граничного радиуса

Два значения длины свойства "border-radius" определяют радиусы четвертого эллипса, который определяет форму угла (см. Диаграмму ниже). Первое значение - это горизонтальный радиус (или вертикальный, если "режим записи" - вертикальный). Если вторая длина опущена, она равна первой (а угол, таким образом, четверть круга). Если длина равна нулю, угол квадратный, а не округленный. Радиус границы также приводит к округлению фона элемента (даже если граница "нет"). Отрицательные значения не допускаются.

Image from the specification

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

div {
  background: red;
  width: 200px;   
  height: 280px; 
  border-bottom-left-radius: 50% 25%;
  border-bottom-right-radius: 50% 25%;
  border-top-left-radius: 50% 25%;
  border-top-right-radius: 50% 25%;
}
<div></div>

Эллипс использовал бы 100% для первого или второго значения, но значение менее 100% для другого:

div {
  background: red;
  width: 200px;   
  height: 280px; 
  border-bottom-left-radius: 25% 100%;
  border-bottom-right-radius: 25% 100%;
  border-top-left-radius: 25% 100%;
  border-top-right-radius: 25% 100%;
}
<div></div>
+4
источник

Вы действительно что-то пробовали?

#test {
  width: 200px;
  height: 280px;
  border: 1px solid;
  border-radius: 50%;
}
<div id='test'></div>
+2
источник

Посмотрите другие вопросы по меткам или Задайте вопрос