Стрілка у колі на CSS

Привіт:) У цьому пості покажу просте рішення стрілки у колі за допомогою CSS.

<!-- HTML -->

<div class="button__arrow arrow-right"></div>
/* CSS */

.button__arrow {
    width: 36px;
    height: 36px;

    border: 1px solid #78B928;
    border-radius: 50%;
}

.button__arrow::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-top: 2px solid #78B928;
    border-right: 2px solid #78B928;
}

.arrow-right {
    transform: rotate(45deg);
}

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *