仅使用css的X关闭按钮

如何仅在CSS3中制作十字（X），用作关闭按钮

我已经找了很长时间了，但找不到如何。。。。 当我在使用它的网站上查看源代码时，总会有一些奇怪的东西使我所获取的代码无法使用

我想要的X按钮：

单击图像时，这是右侧的十字架：

---

我认为如果有人能发布一个简单的通用CSS代码，在CSS3中制作一个简单的X叉，这将是一件好事。

您要寻找的要点是：

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

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

#mdiv{
宽度：25px；
高度：25px；
背景色：红色；
边框：1px纯黑；
}
.mdiv{
高度：25px；
宽度：2倍；
左边距：12px；
背景色：黑色；
变换：旋转（45度）；
Z指数：1；
}
医学博士{
高度：25px；
宽度：2倍；
背景色：黑色；
变换：旋转（90度）；
Z指数：2；
}

---

这里有多种尺寸和悬停动画供您选择

---

作为关闭或“时间”符号的纯CSS解决方案，您可以将ISO代码与内容属性一起使用。我经常将其用于：after或：before伪选择器

内容代码为\00d7

示例

然后，您可以按任何方式设置伪选择器的样式和位置。 希望这对某人有所帮助：）。

您可以使用svg

试试这个

。关闭{
位置：绝对位置；
右：32px；
顶部：32px；
宽度：32px；
高度：32px；
不透明度：0.3；
}
.关闭：悬停{
不透明度：1；
}
.close:之前，.close:之后{
位置：绝对位置；
左：15px；
内容：''；
高度：33像素；
宽度：2倍；
背景色：#333；
}
.结束：之前{
变换：旋转（45度）；
}
.结束：之后{
变换：旋转（-45度）；
}

---

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

它是一个

，它有供屏幕阅读器使用的文本。

按钮{
宽度：2em；
高度：2em；
填充：0；
位置：绝对位置；
顶部：1rem；
右：1rem；
光标：指针；
}
只有老先生{
位置：绝对位置；
宽度：1px；
高度：1px；
填充：0；
保证金：-1px；
溢出：隐藏；
剪辑：rect（0,0,0,0）；
边界：0；
}
按钮：：之前，
按钮：：之后{
内容：''；
宽度：1px；
身高：100%；
背景：#333；
显示：块；
变换：旋转（45度）translateX（0px）；
位置：绝对位置；
左：50%；
排名：0；
}
按钮：：之后{
变换：旋转（-45度）translateX（0px）；
}
/*演示*/
身体{
背景：黑色；
}
.窗格{
保证金：0自动；
宽度：50vw；
最小高度：50vh；
背景：#FFF；
位置：相对位置；
边界半径：5px；
}

接近

这是一个很好的解决方案，用于完全居中的圆形X图标按钮

• 仅使用CSS
• 不依赖字体
• 使用伪元素规则

  .close:：before、.close:：after

• 使用aria标签的屏幕阅读器支持
• 通过使用透明灰色和

  currentColor

  来适应按钮或上级按钮上指定的当前文本颜色，在浅色或深色背景下工作

。关闭{
垂直对齐：中间对齐；
边界：无；
颜色：继承；
边界半径：50%；
背景：透明；
位置：相对位置；
宽度：32px；
高度：32px；
不透明度：0.6；
}
.结束：聚焦，
.关闭：悬停{
不透明度：1；
背景：rgba（128,128,128,0.5）；
}
.关闭：活动{
背景：rgba（128,128,128,0.9）；
}
/*X的尖齿*/
.关闭：：之前，
.关闭：：之后{
内容：“；
位置：绝对位置；
最高：50%；
左：50%；
高度：20px；
宽度：4px；
背景色：当前颜色；
}
.关闭：：之前{
变换：平移（-50%，-50%）旋转（45度）；
}
.关闭：：之后{
变换：平移（-50%，-50%）旋转（-45度）；
}

——简单的HTML解决方案-- 易于调整图标大小的最终结果：

JSFIDLE演示：

简单HTML：

注:

• tabindex

  属性有助于iOS触摸设备的可访问性

• 角色

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

• close

  一词也是供屏幕阅读器使用的

CSS代码：

。关闭{
位置：绝对位置；
排名：0；
右：0；
显示：块；
宽度：50px；
高度：50px；
字号：0；
}
.关闭：之前，
.结束：之后{
位置：绝对位置；
最高：50%；
左：50%；
宽度：5px；
高度：20px；
背景色：#f0；
变换：旋转（45度）平移（-50%，-50%）；
变换原点：左上角；
内容：''；
}
.结束：之后{
变换：旋转（-45度）平移（-50%，-50%）；
}

要调整闭合X图标的厚度，请更改

width

属性。更薄图标的示例：

.close:before，
.结束：之后{
宽度：2倍；
}

要调整闭合X图标的长度，请更改

height

属性。例如：

.close:before，
.结束：之后{
高度：33像素；
}

。关闭btn{
字体大小：60px；
字体大小：粗体；
颜色：#000；
}

---

×你可以使用fontawesome的副本..CSS真的是这个工作的错误工具。其他任何东西都会更好。具有适当字形的字体、图像、SVG、画布或任何内容。但不是CSS.thx，我的问题不是“这是一个好的实践吗”，或者“什么可以取代CSS来做它（fontawesome）”，我想知道是否有人有cs
<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>

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

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