X关闭按钮只使用css

前端之家收集整理的这篇文章主要介绍了X关闭按钮只使用css前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使一个十字架(X)只在 css3中,用作一个关闭按钮?

我一直在搜索很久以来,我找不到如何….
当我使用它在网站上查看源代码时,总会有一些奇怪的代码使我无法使用.

X按钮我想要:http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

当您点击图像时,这是右侧的十字.

我认为如果有人可以发布一个简单的通用CSS代码来在css3中做一个简单的X交叉,这将是很好的

谢谢

解决方法

你正在寻找的要点是
  1. tag-remove:before {
  2. content: 'x'; // here is your X(cross) sign.
  3. color: #fff;
  4. font-weight: 300;
  5. font-family: Arial,sans-serif;
  6. }

你可以很容易地让自己重新开始.
编辑:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #mdiv
  6. {
  7. width:25px;
  8. height:25px;
  9. background-color:red;
  10. border:1px solid black;
  11. }
  12. .mdiv
  13. {
  14. height:25px;
  15. width:2px;
  16. margin-left:12px;
  17. background-color:black;
  18. transform: rotate(45deg);
  19. -ms-transform: rotate(45deg); /* IE 9 */
  20. -webkit-transform: rotate(45deg); /* Safari and Chrome */
  21. Z-index:1;
  22.  
  23. }
  24. .md
  25. {
  26. height:25px;
  27. width:2px;
  28.  
  29. background-color:black;
  30. transform: rotate(90deg);
  31. -ms-transform: rotate(90deg); /* IE 9 */
  32. -webkit-transform: rotate(90deg); /* Safari and Chrome */
  33. Z-index:2;
  34.  
  35. }
  36. </style>
  37. </head>
  38. <body>
  39.  
  40. <div id="mdiv" >
  41. <div class="mdiv">
  42. <div class="md">
  43. </div>
  44. </div>
  45.  
  46. <div>
  47.  
  48. </body>

猜你在找的CSS相关文章