X 关闭按钮仅使用 css [英] X close button only using css

问题描述

如何只在 CSS3 中制作一个十字 (X)，用作关闭按钮?

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

我想要的 X 按钮:

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

解决方案

您要找的要点是:

.tag-remove::before {内容:'x';//这是你的 X(cross) 符号.颜色:#fff;字体粗细:300；字体系列:Arial、sans-serif；}

仅供参考，你可以很容易地自己制作一个关闭按钮:

#mdiv {宽度:25px；高度:25px；背景颜色:红色；边框:1px纯黑色；}.mdiv {高度:25px；宽度:2px；左边距:12px；背景颜色:黑色；变换:旋转(45度)；Z 指数:1；}.md {高度:25px；宽度:2px；背景颜色:黑色；变换:旋转(90度)；Z-指数:2；}

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

How to make a cross (X) only in CSS3, to use as a close button?

I've been searching for a long time, and cannot found how.... When I look at source code on a website using it, there's always something weird which makes the code I take unusable.

The X button I want: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

When you click an image, this is the cross on the right:

I think this would be great if somebody can post a simple universal CSS code to make a simple X cross in CSS3.

解决方案

Main point you are looking for is:

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

FYI, you can make a close button by yourself very easily:

#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 关闭按钮仅使用 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！