css3实例2——制作小标题（丝带）

效果图如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3小标题制作</title>
		<style type="text/css">
			*{margin:0px;padding:0px;}
			html body{width:100%;height:100%;text-align: center;}
			.ribbon{display:inline-block;position:relative;}
			.ribbon{margin:0;margin-top:5%;padding:0.34em 1em;text-align: center;}
			.ribbon{letter-spacing:0.1em;color: #ffffff;font-size: 12px;font-family:'Patua One',sans-serif;}
			.ribbon{ 
				text-shadow:0px -1px 0px rgba(0,0,0,0.3);
				box-shadow: inset 0px 1px 0px rgba(255,255,255,.3),
							inset 0px 0px 20px rgba(0,0,0,0.1),
							0px 1px 1px rgba(0,0,0,0.4);
				 background:-webkit-linear-gradient(top,#1eb2df, #17a7d2);		     
			}
			.ribbon:before, .ribbon:after {
				content: "";
				z-index:-2;
				display:block;
				position:absolute;				
				bottom:-0.5em;
				width:0.2em;
				border:0.9em solid #1eb2df;
				box-shadow:0px 1px 0px rgba(0,0,0,0.4);
			}
		
			.ribbon:before{
					left:-1.35em;
					border-right-width: .75em;
					border-left-color:transparent;
				}
	
			.ribbon:after{
					right:-1.35em;
					border-left-width: .75em;
					border-right-color:transparent;
				}
	
			.content:before, .content:after {
					content:"";
					bottom:-.5em;
					position:absolute;
					display:block;
					border-style:solid;
					border-color: #0675b3 transparent transparent transparent;
					z-index:-1;
				}
			.content:before{
				  left: 0;
				  border-width: .5em 0 0 .5em;
				}	
			.content:after {
				  right: 0;
				  border-width: .5em .5em 0 0;
				}
		</style>
	</head>
	<body>
		<div class="ribbon"  >
			<span class="content" >Hello There</span>
		</div>
	</body>
</html>

　　

 

posted on 2017-12-07 14:28  木之子梦之蝶  阅读(420)  评论(0)    收藏  举报

导航