CSS фигуры: глаз
создаем контур глаза с помощью CSS

Глаз - одна из базовых форм, требующих небольшого поворота.
Создадим квадрат, затем установим радиус границы для двух противоположных углов, оставив два других угла на нуле. Лучше начинать с верхнего левого угла, добавив поворот на 45 градусов, но можно выбрать любой другой угол и настроить поворот соответствующим образом.
<div class="eye"></div>
Можно использовать свойство rotate: 45deg
или transform: rotate(45deg)
. Оба варианта будут работать.
.eye {
width: 200px;
aspect-ratio: 1;
background: black;
rotate: 45deg;
border-radius: 80% 0;
}
Что касается border-radius
: чем больше значение, тем мягче будет передаваться кривизна глаза. Можно поэкспериментировать со значениями, чтобы одна сторона стала выше другой, например: border-radius: 80% 0 100% 0
.
Спасибо за внимание.