我想只使用CSS创建一个关闭按钮。

我相信我不是第一个这样做的人,所以有人知道哪种字体的“x”宽与高相同,这样它就可以跨浏览器使用,看起来像一个关闭按钮吗?


当前回答

×& # 215;或者报;U+00D7的乘法号

×相同字符,字体粗细较强


⨯& # 10799;U+2A2F吉布斯积


✖& # 10006;U+2716沉重的乘法符号


如果你支持,还有一个表情符号❌。如果你没有,你只看到一个正方形= ❌


我还在Codepen上制作了这个简单的代码示例,当时我和一个设计师一起工作,当我问他是否可以用一个编码版本而不是图像替换你的关闭按钮时,他让我向她展示它会是什么样子。

<ul>
  <li class="ele">
    <div class="x large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop large"><b></b><b></b><b></b><b></b></div>
    <div class="x t large"><b></b><b></b><b></b><b></b></div>
    <div class="x shift large"><b></b><b></b><b></b><b></b></div>
  </li>
  <li class="ele">
    <div class="x medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop medium"><b></b><b></b><b></b><b></b></div>
    <div class="x t medium"><b></b><b></b><b></b><b></b></div>
    <div class="x shift medium"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop small"><b></b><b></b><b></b><b></b></div>
    <div class="x t small"><b></b><b></b><b></b><b></b></div>
    <div class="x shift small"><b></b><b></b><b></b><b></b></div>
    <div class="x small grow"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x switch"><b></b><b></b><b></b><b></b></div>
  </li>
</ul>

其他回答

以防万一,有人正在搜索正确和错误的标记:

char rightMark = '\u2713';
char wrongMark = '\u2717';

将打印:

✓ Right Mark
✗ Wrong Mark

这可能是迂迂的,但到目前为止,还没有人真正给出一个解决方案“只使用CSS创建一个关闭按钮。”给你:

#close:before {
  content: "✖";
  border: 1px solid gray;
  background-color:#eee;
  padding:0.5em;
  cursor: pointer;
}

http://codepen.io/anon/pen/VaWqYg

×& # 215;或者报;U+00D7的乘法号

×相同字符,字体粗细较强


⨯& # 10799;U+2A2F吉布斯积


✖& # 10006;U+2716沉重的乘法符号


如果你支持,还有一个表情符号❌。如果你没有,你只看到一个正方形= &#10060;


我还在Codepen上制作了这个简单的代码示例,当时我和一个设计师一起工作,当我问他是否可以用一个编码版本而不是图像替换你的关闭按钮时,他让我向她展示它会是什么样子。

<ul>
  <li class="ele">
    <div class="x large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop large"><b></b><b></b><b></b><b></b></div>
    <div class="x t large"><b></b><b></b><b></b><b></b></div>
    <div class="x shift large"><b></b><b></b><b></b><b></b></div>
  </li>
  <li class="ele">
    <div class="x medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop medium"><b></b><b></b><b></b><b></b></div>
    <div class="x t medium"><b></b><b></b><b></b><b></b></div>
    <div class="x shift medium"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop small"><b></b><b></b><b></b><b></b></div>
    <div class="x t small"><b></b><b></b><b></b><b></b></div>
    <div class="x shift small"><b></b><b></b><b></b><b></b></div>
    <div class="x small grow"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x switch"><b></b><b></b><b></b><b></b></div>
  </li>
</ul>

我更喜欢字体很棒:http://fortawesome.github.io/Font-Awesome/icons/

你要找的图标是fa-times。使用起来很简单:

<button><i class="fa fa-times"></i> Close</button>

小提琴在这里

是另一个不太厚的好选项。HTML代码是&#10005;,或者十六进制的2715。