x关闭按钮，只用css [英] X close button only using css
问题描述
如何使一个十字（X）只有在CSS3，作为一个关闭按钮使用？
How to make a cross (X) only in css3, to use as a close button ?
因为很长一段时间我一直在寻找，我无法找到如何....
当我用它在对网站源$ C $ C看，总有一些奇怪这使得code我把无法使用。
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.
X按钮，我想：<一href=\"http://tympanus.net/Tutorials/ThumbnailGridExpanding$p$pview/\">http://tympanus.net/Tutorials/ThumbnailGridExpanding$p$pview/
当您单击图像，这是正确的十字架上。
When you click an image, this is the cross on the right.
我认为这将是巨大的，如果有人可以张贴一个简单的通用的css code键使CSS3中一个简单的X交
I think this would be great if somebody can post a simple universal css code to make a simple X cross in css3
THX
推荐答案
您正在寻找的主要观点是
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;
}
remaings你可以通过自己使它变得非常容易。
修改
<!DOCTYPE html>
<html>
<head>
<style>
#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);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
Z-index:1;
}
.md
{
height:25px;
width:2px;
background-color:black;
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
Z-index:2;
}
</style>
</head>
<body>
<div id="mdiv" >
<div class="mdiv">
<div class="md">
</div>
</div>
<div>
</body>
这篇关于x关闭按钮，只用css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
