【问题标题】：X close button only using cssX 关闭按钮仅使用 css
【发布时间】：2013-09-07 19:18:22
【问题描述】：

如何仅在 CSS3 中制作十字 (X) 以用作关闭按钮？

找了好久，没找到。。。。当我在使用它的网站上查看源代码时，总会有一些奇怪的东西使我使用的代码无法使用。

我想要的 X 按钮：http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

当你点击图片时，这是右边的十字：

我认为如果有人可以发布一个简单的通用 CSS 代码来在 CSS3 中制作一个简单的 X 交叉，那就太好了。

【问题讨论】：

stackoverflow.com/questions/10019797/pure-css-close-button的副本
你可以使用fontawesome..
CSS 真的是真的适合这项工作的错误工具。其他任何事情都会更好。具有适当字形的字体、图像、SVG、Canvas 等等。但不是 CSS。
谢谢你的回答，但我的问题不是'这是一个好习惯'，或者'什么可以代替 css 来做它（fontawesome）'，我想知道是否有人有 css - 仅用于放置 X 关闭按钮的代码（正如我们在 codrop 的链接上看到的那样）。添加内容：样式表上的“x”不是我想要做的，因为 X 交叉将过多地依赖于所使用的字体系列。我想用纯 css 整形来制作它。
我已经发布了关于这个问题的答案stackoverflow.com/questions/10019797/pure-css-close-button/…，我的代码不使用任何纯文本 css

标签： css button

【解决方案1】：

作为结束符号或“时间”符号的纯 CSS 解决方案，您可以使用带有 content 属性的 ISO 代码。我经常将它用于 :after 或 :before 伪选择器。

内容代码为\00d7。

示例

div:after{
  display: inline-block;
  content: "\00d7"; /* This will render the 'X' */
}

然后，您可以以任何您想要的方式设置和定位伪选择器。希望这对某人有帮助:)。

【讨论】：

如果有人想要，“加号”符号是代码\002b。

【解决方案2】：

试试这个Cross In CSS

.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

&lt;a href="#" class="close"&gt;

【讨论】：

您能解释一下您的代码是如何工作的吗？我很难理解X 来自哪里？似乎content=''plus 高度和宽度正在起作用，但我无法理解逻辑
我想我明白了。我不知道伪元素本身实际上就是一个元素，并且像所有元素一样，它周围有一个框。所以你正在设置盒子的宽度，高度。由于宽度为 2px，它有效地创建了一个像“I”这样的条形。您可以将 content 属性留空，并将伪元素视为无内容框
是的，如果你对 css 很了解，这个 X 来自这一行，请检查它并检查它是如何工作的。如果你仍然感到困惑，请告诉我 .close:before, .close:after { position : 绝对的;左：15px；内容： ' ';高度：33px；宽度：2px；背景颜色：#333； } .close:before { 变换：旋转（45度）； } .close:after { 变换：旋转(-45deg); }
请检查此代码并彻底检查它，您将了解此代码是如何使用的

【解决方案3】：

您要查找的要点是：

.tag-remove::before {
  content: 'x'; // here is your X(cross) sign.
  color: #fff;
  font-weight: 300;
  font-family: Arial, sans-serif;
}

仅供参考，您可以非常轻松地自己制作关闭按钮：

#mdiv {
  width: 25px;
  height: 25px;
  background-color: red;
  border: 1px solid black;
}

.mdiv {
  height: 25px;
  width: 2px;
  margin-left: 12px;
  background-color: black;
  transform: rotate(45deg);
  Z-index: 1;
}

.md {
  height: 25px;
  width: 2px;
  background-color: black;
  transform: rotate(90deg);
  Z-index: 2;
}

<div id="mdiv">
  <div class="mdiv">
    <div class="md"></div>
  </div>
</div>

【讨论】：

添加内容：样式表上的“x”不是我想要做的，因为 X 交叉将过多地依赖于所使用的字体系列。我想用纯 css 整形来制作它。
@user2746369：请检查编辑。是你要找的吗？
非常感谢！这正是我一直在寻找的！非常感谢
您可以使用×（倍符号）代替“X”。
警告：不要使用第一个示例，因为使用字母 X 作为关闭符号是错误的。有更好的选择，看起来好多了，见stackoverflow.com/a/27262158/2676137

【解决方案4】：

这里有多种尺寸和悬停动画供您选择。demo(link)

<ul>
  <li>Large</li>
  <li>Medium</li>
  <li>Small</li>
  <li>Switch</li>
</ul>

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

css

.ele div.x {
-webkit-transition-duration:0.5s;
  transition-duration:0.5s;
}

.ele div.x.slow {
-webkit-transition-duration:1s;
  transition-duration:1s;
}

ul { list-style:none;float:left;display:block;width:100%; }
li { display:inline;width:25%;float:left; }
.ele { width:25%;display:inline; }
.x {
  float:left;
  position:relative;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#CCC;
  border-radius:2px;
  border:solid 2px #FFF;
  transition: all .3s ease-out;
  cursor:pointer;
}
.x.large { 
  width:30px;
  height:30px;
}

.x.medium {
  width:20px;
  height:20px;
}

.x.small {
  width:10px;
  height:10px;
}

.x.switch {
  width:15px;
  height:15px;
}
.x.grow {

}

.x.spin:hover{
  background:#BB3333;
  transform: rotate(180deg);
}
.x.flop:hover{
  background:#BB3333;
  transform: rotate(90deg);
}
.x.t:hover{
  background:#BB3333;
  transform: rotate(45deg);
}
.x.shift:hover{
  background:#BB3333;
}

.x b{
  display:block;
  position:absolute;
  height:0;
  width:0;
  padding:0;
  margin:0;
}
.x.small b {
  border:solid 5px rgba(255,255,255,0);
}
.x.medium b {
  border:solid 10px rgba(255,255,255,0);
}
.x.large b {
  border:solid 15px rgba(255,255,255,0);
}
.x.switch b {
  border:solid 10px rgba(255,255,255,0);
}

.x b:nth-child(1){
  border-top-color:#FFF;
  top:-2px;
}
.x b:nth-child(2){
  border-left-color:#FFF;
  left:-2px;
}
.x b:nth-child(3){
  border-bottom-color:#FFF;
  bottom:-2px;
}
.x b:nth-child(4){
  border-right-color:#FFF;
  right:-2px;
}

【讨论】：

【解决方案5】：

你可以使用 svg。

<svg viewPort="0 0 12 12" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    <line x1="1" y1="11" 
          x2="11" y2="1" 
          stroke="black" 
          stroke-width="2"/>
    <line x1="1" y1="1" 
          x2="11" y2="11" 
          stroke="black" 
          stroke-width="2"/>
</svg>

【讨论】：

确保使用viewBox，而不是viewPort。这是我目前正在使用的：<svg class="close" viewBox="0 0 1 1" height="1" width="1" version="1.1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="1" x2="1" y2="0" stroke="black" stroke-width="0.1" /><line x1="0" y1="0" x2="1" y2="1" stroke="black" stroke-width="0.1" /></svg>.

【解决方案6】：

-- 简单的HTML解决方案--

易于调整图标的最终结果：

JSfiddle 演示：https://jsfiddle.net/allenski/yr5gk3cm/

简单的 HTML：

<a href="#" class="close" tabindex="0" role="button">close</a>

注意：

tabindex 属性有助于 iOS 触控设备的可访问性焦点。

role 属性是让屏幕阅读器用户知道这是一个按钮。

close 这个词也是供屏幕阅读器提及的。

CSS 代码：

.close {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 50px;
    height: 50px;
    font-size: 0;
}
.close:before, 
.close:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 20px;
    background-color: #F0F0F0;
    transform: rotate(45deg) translate(-50%, -50%);
    transform-origin: top left;
    content: '';
}
.close:after {
    transform: rotate(-45deg) translate(-50%, -50%);
}

要调整关闭 X 图标的粗细，请更改 width 属性。更细的图标示例：

.close:before, 
.close:after {
    width: 2px;
}

要调整关闭 X 图标的长度，请更改 height 属性。示例：

.close:before, 
.close:after {
    height: 33px;
}

【讨论】：

【解决方案7】：

.close-btn {
  font-size: 60px;
  font-weight: bold;
  color: #000;
}

&lt;span class="close-btn"&gt;&amp;times;&lt;/span&gt;

【讨论】：

【解决方案8】：

具有适当语义和可访问性设置的真正 CSS。

这是一个<button>，它有屏幕阅读器的文本。

https://codepen.io/specialweb/pen/ExyWPYv?editors=1100

button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

button::before,
button::after {
    content: '';
    width: 1px;
    height: 100%;
    background: #333;
    display: block;
    transform: rotate(45deg) translateX(0px);
    position: absolute;
    left: 50%;
    top: 0;
}

button::after {
    transform: rotate(-45deg) translateX(0px);
}


/* demo */
body {
  background: black;
}
.pane {
  margin: 0 auto;
  width: 50vw;
  min-height: 50vh;
  background: #FFF;
  position: relative;
  border-radius: 5px;
}

<div class="pane">
  <button type="button"><span class="sr-only">Close</span></button>
</div>

【讨论】：

【解决方案9】：

这是完美居中的圆形 X 图标按钮的一个很好的插入式解决方案

仅使用 CSS
不依赖字体
可以在不影响居中的情况下，在伪元素规则.close::before, .close::after中使用width和height配置X的齿的粗细和长度
屏幕阅读器支持使用aria-label
使用透明灰色和currentColor 在浅色或深色背景上工作，以适应按钮或祖先指定的当前文本颜色。

.close {
    vertical-align: middle;
    border: none;
    color: inherit;
    border-radius: 50%;
    background: transparent;
    position: relative;
    width: 32px;
    height: 32px;
    opacity: 0.6;
}
.close:focus,
.close:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.5);
}
.close:active {
    background: rgba(128, 128, 128, 0.9);
}
/* tines of the X */
.close::before,
.close::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20px;
    width: 4px;
    background-color: currentColor;
}
.close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

<div style="padding: 15px">
    <button class="close" aria-label="Close"></button>
</div>
<div style="background: black; color: white; padding: 15px">
    <button class="close" aria-label="Close"></button>
</div>
<div style="background: orange; color: yellow; padding: 15px">
    <button class="close" aria-label="Close"></button>
</div>

【讨论】：

【解决方案10】：

<div style="width: 10px; height: 10px; position: relative; display: flex; justify-content: center;">
   <div style="width: 1.5px; height: 100%; background-color: #9c9f9c; position: absolute; transform: rotate(45deg); border-radius: 2px;"></div>
   <div style="width: 1.5px; height: 100%; background-color: #9c9f9c; position: absolute; transform: rotate(-45deg); border-radius: 2px;"></div>
</div>

【讨论】：