CSS3实现褶皱带效果

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现褶皱带效果的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS3实现褶皱带效果</title>
	<link href='ribbon.css' rel='stylesheet' type='text/css'>	
</head>

<body>
	<h1 class="ribbon">Swish CSS3 folded ribbon effect.</h1>
	<h1 class="ribbon" id="ff-proof">..and this one avoids the display issues in 
	FireFox..</h1>
</body>
</html>

CSS代码(ribbon.css):

html{background:url(black-linen.png);/* Black Linen http://subtlepatterns.com */
}
body{margin:0;padding:100px 0 0 0;}
.ribbon{padding:0 25px;height:80px;color:#301607;background-color:#c94700;background-image:-webkit-gradient(linear,left top,left bottom,from(#c94700),to(#b84100));background-image:-webkit-linear-gradient(top,#c94700,#b84100);background-image:-moz-linear-gradient(top,#c94700,#b84100);background-image:-ms-linear-gradient(top,#c94700,#b84100);background-image:-o-linear-gradient(top,#c94700,#b84100);background-image:linear-gradient(top,#c94700,#b84100);border-bottom:1px solid rgba(255,255,255,0.3);position:relative;float:left;clear:left;font-family:'Montez',cursive;font-size:32px;line-height:80px;text-shadow:1px 1px 0 rgba(255,255,255,0.3);-moz-box-shadow:-7px 7px 0px rgba(0,0,0,0.3);-webkit-box-shadow:-7px 7px 0px rgba(0,0,0,0.3);box-shadow:-7px 7px 0px rgba(0,0,0,0.3);border-bottom-right-radius:20px 5px;}
.ribbon:after{content:"";display:block;width:40px;height:0px;position:absolute;right:0;bottom:4px;z-index:20;border-bottom:80px solid #de6625;border-right:80px solid transparent;-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;-moz-transform:rotate(90deg);-moz-transform-origin:right bottom;-o-transform:rotate(90deg);-o-transform-origin:right bottom;-ms-transform:rotate(90deg);-ms-transform-origin:right bottom;transform:rotate(90deg);transform-origin:right bottom;}
.ribbon:before{content:"";display:block;width:20px;height:0px;position:absolute;right:0;bottom:4px;z-index:10;border-bottom:80px solid rgba(0,0,0,0.3);border-right:80px solid transparent;-webkit-transform:rotate(80deg);-webkit-transform-origin:right bottom;-moz-transform:rotate(80deg);-moz-transform-origin:right bottom;-o-transform:rotate(80deg);-o-transform-origin:right bottom;-ms-transform:rotate(80deg);-ms-transform-origin:right bottom;transform:rotate(80deg);transform-origin:right bottom;}
/*let's solve the unusual display problem caused by firefox*/
.ribbon#ff-proof:after{width:0px;height:40px;position:absolute;right:-160px;border-left:80px solid #de6625;border-bottom:80px solid transparent;-webkit-transform:none;-moz-transform:none;-o-transform:none;-ms-transform:none;transform:none;}

附件:下载该文件资源,减少时间成本(增值服务)