如何使用 CSS 绘制复选标记/勾号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21968531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw a checkmark / tick using CSS?
提问by dayuloli
采纳答案by JohanVdR
You can now include web fonts and even shrink down the file size with just the glyphs you need. https://github.com/fontello/fontellohttp://fontello.com/
您现在可以包含 Web 字体，甚至可以仅使用您需要的字形来缩小文件大小。 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;
}
回答by dayuloli
You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation.
您可以绘制两个矩形并将它们并排放置。然后旋转 45 度。修改任何变化的宽度/高度/顶部/左侧参数。
HTML
HTML
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
CSS
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;
}
回答by Kheema Pandey
Here is another CSS solution. its take less line of code.
这是另一个 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>
Here is the Demo link http://jsbin.com/keliguqi/1/
回答by Henry
Do some transforms with the letter L
用字母 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>回答by Philip
An additional solution, for when you only have one of the :before / :after psuedo-elements available, is described here: :after-Checkbox using borders
当您只有 :before / :after 伪元素之一可用时，这里描述了另一种解决方案：:after-Checkbox using border
It basically uses the border-bottomand border-rightproperties to create the checkbox, and then rotates the mirrored L using transform
它基本上使用border-bottom和border-right属性来创建复选框，然后使用transform
Example
例子
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>回答by Petronella
only css, quite simple I find it:
只有 css，我觉得很简单：
.checkmark {
display: inline-block;
transform: rotate(45deg);
height: 25px;
width: 12px;
margin-left: 60%;
border-bottom: 7px solid #78b13f;
border-right: 7px solid #78b13f;
}<div class="checkmark"></div>回答by BM2ilabs
i like this way because you don't need to create two components just one.
我喜欢这种方式，因为您不需要只创建两个组件。
.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;
}
回答by silvedo
Try this // html example
试试这个 // html 示例
<span>✓</span>
// css example
// css 示例
span {
content: "13";
}
回答by Okiemute Omuta
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);
}
回答by JohanVdR
I suggest to use a tick symbol not draw it. Or use webfonts which are free for example: fontello[dot]com You can than replace the tick symbol with a web font glyph.
我建议使用刻度符号而不是绘制它。或者使用免费的网络字体，例如： fontello[dot]com 您可以用网络字体字形替换刻度符号。
Lists
列表
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;
}
See here: http://jsfiddle.net/hpmW7/3/
见这里：http: //jsfiddle.net/hpmW7/3/
Checkboxes
复选框
You even have web fonts with tick symbol glyphs and CSS 3 animations. For IE8 you would need to apply a polyfill since it does not understand :checked.
您甚至可以使用带有刻度符号字形和 CSS 3 动画的网络字体。对于 IE8，您需要应用 polyfill，因为它不理解 :checked。
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;
}
See the JS fiddle: http://jsfiddle.net/VzvFE/37
见JS小提琴：http: //jsfiddle.net/VzvFE/37
