如何使一个十字架(X)只在
css3中,用作一个关闭按钮?
我一直在搜索很久以来,我找不到如何….
当我使用它在网站上查看源代码时,总会有一些奇怪的代码使我无法使用.
X按钮我想要:http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/
当您点击图像时,这是右侧的十字.
我认为如果有人可以发布一个简单的通用CSS代码来在css3中做一个简单的X交叉,这将是很好的
谢谢
解决方法
你正在寻找的要点是
- tag-remove:before {
- content: 'x'; // here is your X(cross) sign.
- color: #fff;
- font-weight: 300;
- font-family: Arial,sans-serif;
- }
你可以很容易地让自己重新开始.
编辑:
- <!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>