18.纯CSS关闭样式（X）

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

body{

text-align: center;

}

.close{

 position:relative;

 width:0.3em;

 height:1.5em;

 background: #333;

 -webkit-transform: rotate(45deg);

 -moz-transform: rotate(45deg);

 -o-transform: rotate(45deg);

 -ms-transform: rotate(45deg);

 transform: rotate(45deg);

 display: inline-block;

}

.close:after{

 content: "";

 position: absolute;

 top: 0;

 left: 0;

 width:0.3em;

 height:1.5em;

 background: #333;

 -webkit-transform: rotate(270deg);

 -moz-transform: rotate(270deg);

 -o-transform: rotate(270deg);

 -ms-transform: rotate(270deg);

 transform: rotate(270deg);

}

</style>

</head>

<body>

<span class="close"></span>

</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容