Учимся создавать фигуры с помощью CSS. Лупа

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

2022-10-17 I Shar

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

Вы когда-нибудь мечтали создать иконку увеличительного стекла, используя только CSS, вместо скучного svg?

Скорее всего - нет. Но, несмотря на Ваш ответ, давайте сделаем это.

Для начала нам понадобится окружность:

.magnifying-glass {
    position: relative;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    background-color: aliceblue;
    border: 15px solid slategray;
    border-radius: 50%;
}

Половину работы мы уже сделали. Осталось создать и правильно разместить ручку для нашей лупы:

.magnifying-glass {
    position: relative;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    background-color: aliceblue;
    border: 15px solid slategray;
    border-radius: 50%;
}
.magnifying-glass:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 15px;
    background-color: slategray;
    border-radius: 0 7.5px 7.5px 0;
    transform-origin: 0 50%;
    transform: translateX(100%) rotate(45deg);
}

Вот и все, теперь мы знаем, как просто создать лупу на чистом CSS.

Почему не SVG

Как мы видим, создавать фигуры с помощью CSS несколько сложнее чем использовать уже готовые картинки в svg. Но CSS фигуры дают нам значительно больше возможностей для интерактивности. Например, можно создавать довольно интересные hover-эффекты.

Для того, чтобы упростить работу с CSS-фигурой, хорошим решением будет добавить обертку:

И, наконец, для тех, кто читал предыдущие статьи (ссылки находятся в конце текста), небольшой пример - масштабирование сердца при наведении курсора:

.heart {
    position: relative;
    width: 200px;
    height: 160px;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    width: 100px;
    height: 160px;
    left: 100px;
    background-color: tomato;
    border-radius: 100px 100px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    transform-origin: 100% 100%;
    transform: rotate(45deg);
}
    .heart-wrapper {
    cursor: pointer;
    width: 200px;
    height: 160px;
    transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
}
.heart-wrapper:hover {
    transform-origin: 50% 50%;
    transform: scale(1.3);
}

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