Как сделать галочку в css

Как сделать галочку в 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&#41; rotate(-45deg&#41;;
transform-origin: left bottom;
>

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

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

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

Как нарисовать галочку / галочку с помощью CSS?

Как ничья тиковый символ с помощью CSS? Символы, которые я нахожу, используя Unicode не эстетически.

редактировать Шрифты значков-отличное предложение. Я искал что-то вроде этой.

9 ответов

теперь вы можете включить веб-шрифты и даже уменьшить размер файла только с глиф вам нужно. https://github.com/fontello/fontello http://fontello.com/

Вы можете нарисовать два прямоугольника и поместите их рядом друг с другом. А затем поверните на 45 градусов. Измените параметры width/height/top / left для любого изменения.

HTML-код

в CSS

вот еще одно решение CSS. его взять меньше строки кода.

выполните некоторые преобразования с буквой L

дополнительное решение, когда у вас есть только один из :before / :after psuedo-элементов, описано здесь:: после-флажок с использованием границ

Он в основном использует border-bottom и border-right свойства для создания флажка, а затем поворачивает зеркальный L с помощью transform

пример

Я предлагаю использовать тиковый символ, а не рисовать его. Или используйте webfonts, которые бесплатны, например: fontello [dot]com вы можете заменить тиковый символ глифом веб-шрифта.

списки

галочки

у вас даже есть веб-шрифты с символами тика и анимацией CSS 3. Для IE8 вам нужно будет применить polyfill, так как он не понятно: проверено.

вы могли бы хотеть попробовать fontawesome.Ио

Он имеет большую коллекцию икон. Для вас <i aria-hidden="true"></i> должны работать. Есть много значков проверки в этом тоже. Надеюсь, это поможет.

Мне нравится этот способ, потому что вам не нужно создавать две составляющие одного.

Нарисовать галочку средствами CSS

Можете подсказать, как нарисовать в CSS такую галочку(нужно именно нарисовать, а не вставить картинкой)?

галочка

11 &#x43E;&#x442;&#x432;&#x435;&#x442;&#x43E;&#x432; 11

Вариант 3 (clip-path)

Если просто галочку без чекбокса, то вот идея:

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

Анимация галочки начинается после клика мышкой

Постарался повторить и упростить

Просто check галочка, просто SVG:

Простейшая галочка. Толщину и цвет регулируйте сами:

Такое простое решение:

Самая простая в мире галочка :

Ещё один вариант

Хорошо подойдёт для приложений, которые выполняются в стиле Material design, шрифт адаптирован для мобильных версий.

Галочку можно легко внедрить в HTML с помощью символьного шрифта от Google, достаточно просто подключить символьный шрифт и написать название иконки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *