X 关闭按钮仅使用 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18611195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
X close button only using css
提问by hedi
How to make a cross (X) only in css3, to use as a close button ?
如何仅在 css3 中制作十字 (X) 以用作关闭按钮？
I've been searching since long time, i cannot found how.... When i look at source code on website using it, there's always something weird which make the code i take unusable.
我一直在搜索很长时间，我找不到如何.... 当我使用它查看网站上的源代码时，总会有一些奇怪的东西使我无法使用代码。
The X button i want : http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/
我想要的 X 按钮：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
我认为如果有人可以发布一个简单的通用 css 代码来在 css3 中创建一个简单的 X 交叉，那就太好了
Thx
谢谢
采纳答案by Yup
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>回答by andycrone
As a pure CSSsolution for the close or 'times' symbol you can use the ISO code with the contentproperty. I often use this for :after or :before pseudo selectors.
作为结束或“时间”符号的纯 CSS解决方案，您可以将 ISO 代码与内容属性一起使用。我经常将它用于 :after 或 :before 伪选择器。
The content code is \00d7.
内容代码是\00d7。
Example
例子
div:after{
display: inline-block;
content: ".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);
}
d7"; /* This will render the 'X' */
}
You can then style and position the pseudo selector in any way you want. Hope this helps someone :).
然后，您可以按照您想要的任何方式设置和定位伪选择器。希望这对某人有所帮助:)。
回答by Zubair Saif
Try This Cross In CSS
<a href="#" class="close"><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>
回答by davidcondrey
Here's some variety for you with several sizes and hover animations.. demo(link)
这里有一些适合您的多种尺寸和悬停动画..演示（链接）
.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;
}
css
css
<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>回答by MervynYang
You can use svg.
您可以使用 svg。
