Как нарисовать галочку / галочку с помощью CSS?
Как ничья тиковый символ с помощью CSS? Символы, которые я нахожу, используя Unicode не эстетически.
редактировать Шрифты значков-отличное предложение. Я искал что-то вроде этой.
9 ответов
теперь вы можете включить веб-шрифты и даже уменьшить размер файла только с глиф вам нужно. https://github.com/fontello/fontello http://fontello.com/
li:before {
content:'[add icon symbol here]';
font-family: [my cool web icon font here];
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
color: #999;
}
Вы можете нарисовать два прямоугольника и поместите их рядом друг с другом. А затем поверните на 45 градусов. Измените параметры width/height/top / left для любого изменения.
HTML-код
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
в CSS
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
вот еще одно решение CSS. его взять меньше строки кода.
ul li:before
{content:'13';
display:inline-block;
color:red;
padding:0 6px 0 0;
}
ul li{list-style-type:none;font-size:1em;}
<ul>
<li>test1</li>
<li>test</li>
</ul>
вот демо-ссылке http://jsbin.com/keliguqi/1/
выполните некоторые преобразования с буквой L
.checkmark {
font-family: arial;
-ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
-webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
transform: scaleX(-1) rotate(-35deg);
}
<div class="checkmark">L</div>
дополнительное решение, когда у вас есть только один из :before / :after psuedo-элементов, описано здесь:: после-флажок с использованием границ
Он в основном использует border-bottom
и border-right
свойства для создания флажка, а затем поворачивает зеркальный L с помощью transform
пример
li {
position: relative; /* necessary for positioning the :after */
}
li.done {
list-style: none; /* remove normal bullet for done items */
}
li.done:after {
content: "";
background-color: transparent;
/* position the checkbox */
position: absolute;
left: -16px;
top: 0px;
/* setting the checkbox */
/* short arm */
width: 5px;
border-bottom: 3px solid #4D7C2A;
/* long arm */
height: 11px;
border-right: 3px solid #4D7C2A;
/* rotate the mirrored L to make it a checkbox */
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
To do:
<ul>
<li class="done">Great stuff</li>
<li class="done">Easy stuff</li>
<li>Difficult stuff</li>
</ul>
Я предлагаю использовать тиковый символ, а не рисовать его. Или используйте webfonts, которые бесплатны, например: fontello [dot]com вы можете заменить тиковый символ глифом веб-шрифта.
списки
ul {padding: 0;}
li {list-style: none}
li:before {
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
content: '✔';
color: #999;
}
смотрите здесь: http://jsfiddle.net/hpmW7/3/
галочки
у вас даже есть веб-шрифты с символами тика и анимацией CSS 3. Для IE8 вам нужно будет применить polyfill, так как он не понятно: проверено.
input[type="checkbox"] {
clip: rect(1px, 1px, 1px, 1px);
left: -9999px;
position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
content:'';
display:inline-block;
vertical-align: top;
line-height: 1em;
border: 1px solid #999;
border-radius: 0.3em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
}
input[type="checkbox"]:checked + label:before {
content: '✔';
color: green;
}
см. скрипку JS:http://jsfiddle.net/VzvFE/37
li:before {
content: '';
height: 5px;
background-color: green;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 9px;
margin-left: -15px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
li:after {
content: '';
height: 5px;
background-color: green;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 20px;
margin-left: -11px;
margin-top: -6px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
вы могли бы хотеть попробовать fontawesome.Ио
Он имеет большую коллекцию икон. Для вас <i class="fa fa-check" aria-hidden="true"></i>
должны работать. Есть много значков проверки в этом тоже. Надеюсь, это поможет.
Мне нравится этот способ, потому что вам не нужно создавать две составляющие одного.
.checkmark:after {
opacity: 1;
height: 4em;
width: 2em;
-webkit-transform-origin: left top;
transform-origin: left top;
border-right: 2px solid #5cb85c;
border-top: 2px solid #5cb85c;
content: '';
left: 2em;
top: 4em;
position: absolute;
}