Объясните использование CSS3 в форме яйца

Я использую CSS3 для создания случайных фигур. Я застрял на этой форме яйца. Я проверил математику Egg Shapes, которые состоят из двух кругов с различным радиусом. Тем не менее, я не могу связать эту фундаментальную конструкцию с кодом CSS CSS здесь, особенно с частью "border-radius".

#egg {
display:block;
width:126px; 
/* width has to be 70% of height */
/* could use width:70%; in a square container */
height:180px;
background-color:green;

/* beware that Safari needs actual
px for border radius (bug) */
-webkit-border-radius:63px 63px 63px 63px/
108px 108px 72px 72px;
/* fails in Safari, but overwrites in Chrome */
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
 }

Ответы

Ответ 1

5.1. Кривые Радиусы: "свойства радиуса радиуса

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

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

enter image description here

.egg {
    display: block;
    width: 120px;
    height: 180px;
    background-color: green;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
<div class="egg"></div>

Ответ 2

Per спецификация по радиусу границы

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

Вы создаете форму яйца с большим вертикальным радиусом вверху и меньшим вертикальным радиусом внизу.

Ответ 3

Ваш радиус границы разбит на:

border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
border-top-left-radius: 50% 60%;
border-top-right-radius: 50% 60%;

Позвольте сдержать верхнюю левую сторону:

Первое значение - это горизонтальный радиус, это означает, что граница округлена до половины ширины. Второе значение - для вертикального радиуса, поэтому кривая снижается до 60% высоты элемента.