Question

如何使用CSS 绘制刻度线符号？我使用Unicode找到的符号在美学上并不令人愉悦。

修改图标字体是一个很好的建议。我正在寻找像this这样的东西。

Answer 1

您可以绘制两个矩形并将它们放在一起。然后旋转45度。修改任何变体的宽度/高度/顶部/左侧参数。

<强> 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;
}

Answer 2

这是另一个CSS解决方案。它占用的代码更少。

ul li:before
{content:'\2713';
  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/

Answer 3

用字母L

进行一些变换

＆＃13;

.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);
}

＆＃13;

<div class="checkmark">L</div>

＆＃13;

Answer 4

只有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>

Answer 5

另一个解决方案，当你只有一个：之前/：之后的psuedo-elements可用时，在这里描述：:after-Checkbox using borders

它基本上使用border-bottom和border-right属性来创建复选框，然后使用transform

旋转镜像L.

示例

＆＃13;
＆＃13;
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); }
＆＃13;
To do: <ul> <li class="done">Great stuff</li> <li class="done">Easy stuff</li> <li>Difficult stuff</li> </ul>
＆＃13;
＆＃13;
＆＃13;

Answer 6

您现在可以包含网络字体，甚至可以仅使用您需要的字形缩小文件大小。 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;
}

Answer 7

我建议使用刻度符号而不是绘制它。或者使用免费的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，因为它不理解：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;
}

参见JS小提琴：http://jsfiddle.net/VzvFE/37

Answer 8

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);
}

Answer 9

您可能想尝试fontawesome.io

它有很多图标。对于你<i class="fa fa-check" aria-hidden="true"></i>应该工作。这里也有许多检查图标。希望它有所帮助。

Answer 10

我喜欢这种方式，因为您不需要仅创建两个组件。

.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;
}

Animation from Scott Galloway Pen

Answer 11

在对亨利的回答进行了一些更改后，我在一个圆圈中打了一个勾，我来这里是为了寻找那个，所以在这里添加我的代码。

.snackbar_circle {
  background-color: #f0f0f0;
  border-radius: 13px;
  padding: 0 5px;
}

.checkmark {
  font-family: arial;
  font-weight: bold;
  -ms-transform: scaleX(-1) rotate(-35deg);
  -webkit-transform: scaleX(-1) rotate(-35deg);
  transform: scaleX(-1) rotate(-35deg);
  color: #63BA3D;
  display: inline-block;
}

<span class="snackbar_circle">
   <span class="checkmark">L</span>
</span>

Answer 12

尝试一下 // html示例

<span>&#10003;</span>

// css示例

span {
  content: "\2713";
}

Answer 13

此外，您还可以使用awesome font使用以下标记。简单而美丽

可以更改CSS的大小和颜色以及其他功能

查看结果here

Answer 14

这是我制作“选中”按钮的变体

HTML

<button class="unchecked" type="submit" onclick="clickMe(this); return false;" value="something"></button>

JavaScript

function clickMe(data) {
  data.classList.add("checked");
}

CSS

.unchecked::before { content: "C"; }
.unchecked { border-radius: 50%; outline: none; }
.checked::before { content: "L"; }
.checked { background-color: green; transform: rotate(45deg) scaleX(-1); }

Answer 15

这是标志标记的简单CSS。

ul li：after {opacity：1; content：'\ 2713'; right：20px; position：absolute; font-size：20px; font-weight：bold;}

如何使用CSS绘制复选标记/勾号？

15 个答案: