dr.Brain

doctor Brain

мир глазами веб-разработчика

CSS фигуры: глаз

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

dr.Brain

время чтения 1 мин.

Photo by Geon Tavares on Unsplash

Глаз - одна из базовых форм, требующих небольшого поворота.

Создадим квадрат, затем установим радиус границы для двух противоположных углов, оставив два других угла на нуле. Лучше начинать с верхнего левого угла, добавив поворот на 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.


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.