H5,Css小姐又作画了

             用H5和CSS3做出自己名字缩写。
<html>
	<head>
		<meta charset="utf-8">
		<title>name:slx</title>
		<style>
			/*40 60 40*/
			#name{margin: auto;  600px; height:300px; background: red; position: relative;}

			.s{position: relative; left: 150px;  40px; height: 60px; top: 120px;}
			.s1{ 40px; height:5px;background: yellow;}
			.s2{ 40px; height:5px;background: yellow; margin-top: 20px;}
			.s3{ 40px; height:5px;background: yellow; margin-top: 20px;}
			.s4{ 5px; height:27px;background: yellow; position: absolute; bottom: 33px;}
			.s5{ 5px; height:27px;background: yellow; position: absolute; bottom: 6px; left: 35px;}
			
			.l{position: relative; left: 230px;  40px; height: 60px; top: 60px;}
			.l1{ 5px; height:55px;background: yellow; position: absolute;}
			.l2{ 40px; height:5px;background: yellow; position: absolute; top: 50px;}
			
			.x{position: relative; left: 310px;  40px; height: 60px; }
			.x1{ 6px; height:55px;background: yellow; position: absolute; transform: skewX(35deg); left: 17px;}
			.x2{ 6px; height:55px;background: yellow; position: absolute; transform: skewX(-35deg);  left: 17px;}
			
			.truename{position: relative;margin: auto;top: 97px; text-align: right;}
		</style>
	</head>
	<body>
		<div id="name">
			<div class="s">	
				<div class="s1"></div>
				<div class="s2"></div>
				<div class="s3"></div>
				<div class="s4"></div>
				<div class="s5"></div>
			</div>
			
			<div class="l">
				<div class="l1"></div>
				<div class="l2"></div>
			</div>
			
			<div class="x">
				<div class="x1"></div>
				<div class="x2"></div>
			</div>
			
			<div class="truename">作者:孙露秀</div>
		</div>
	</body>
</html>

  

原文地址:https://www.cnblogs.com/21doctor-sun/p/13653854.html