• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как создать галочку с помощью HTML + CSS (Галочка на чистом CSS, что выставляем на сайте на HTML)
Как создать галочку с помощью HTML + CSS
Kosten
Дата: Воскресенье, 2019-10-20, 19:50 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


В этой статье представлены стили, по которым мы создаем галочку, что будет выставлена на чистом CSS. Также можно назвать флажок, как комбинация двух прямых. Мы берем элемент контейнера, который будет содержать эти две строки. Также вместо того, чтобы использовать новые внутренние элементы для создания линий, мы используем псевдоэлементы контейнера.



HTML

Код
<div id="kucomb-navasog"></div>

CSS

Код
#kucomb-navasog {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
}

#kucomb-navasog::before {
    position: absolute;
    left: 0;
    top: 50%;
    height: 50%;
    width: 3px;
   background-color: #2c6dad;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}

#kucomb-navasog::after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #336699;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}

Как видим, что не сложно на стилистике построить галочку. Здесь можно было бы применить преобразование к основному элементу контейнера вместо двух псевдоэлементов, но контейнер был бы повернут за пределы своего обычного положения.

Это могло привести к разрыву соседнего содержимого, однако преобразование может быть применено и к основному контейнеру в зависимости от варианта использования.

Демонстрация
Прикрепления: 7868514.png(3.1 Kb) · Sugas.zip(0.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как создать галочку с помощью HTML + CSS (Галочка на чистом CSS, что выставляем на сайте на HTML)
  • Страница 1 из 1
  • 1
Поиск: