В этой статье представлены стили, по которым мы создаем галочку, что будет выставлена на чистом 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;
}
Как видим, что не сложно на стилистике построить галочку. Здесь можно было бы применить преобразование к основному элементу контейнера вместо двух псевдоэлементов, но контейнер был бы повернут за пределы своего обычного положения.
Это могло привести к разрыву соседнего содержимого, однако преобразование может быть применено и к основному контейнеру в зависимости от варианта использования.
Демонстрация
