X关闭按钮只使用css [英] X close button only using css
本文介绍了X关闭按钮只使用css的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何只在css3中使用交叉（X），用作关闭按钮？
How to make a cross (X) only in css3, to use as a close button ?
我一直在搜索， ....
当我看看网站上的源代码使用它，总有一些奇怪的，使代码我不能使用。
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按钮i想要： http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/
当你单击一个图像，这是右侧的十字。
When you click an image, this is the cross on the right.
我认为这将是巨大的，如果有人可以发布一个简单的通用css代码在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
推荐答案
tag-remove:before {
content: 'x'; // here is your X(cross) sign.
color: #fff;
font-weight: 300;
font-family: Arial, sans-serif;
}
还原你自己很容易就能做到。 $ b EDIT：
remaings you can make it by yourself very easily.
<!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屋！
查看全文
