纯CSS3制作倾斜45度封页角特效

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

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

以下是纯CSS3制作倾斜45度封页角特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3制作倾斜45度封页角特效</title>
<link rel="stylesheet" href="css/zzsc.css">

</head>
<body>

<div class="zzsc">
   <div class="ribbon-zzsc-green"><div class="ribbon-green">CHINAZ</div></div>
</div>
</body>
</html>

CSS代码(zzsc.css):

.zzsc{margin:50px auto;width:280px;height:180px;background:white;border-radius:10px;-webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.3);-moz-box-shadow:0px 0px 8px rgba(0,0,0,0.3);box-shadow:0px 0px 8px rgba(0,0,0,0.3);position:relative;z-index:90;}
.zzsc .ribbon-zzsc-green{width:85px;height:88px;overflow:hidden;position:absolute;top:-3px;right:-3px;}
.zzsc .ribbon-green{font:bold 15px Sans-Serif;color:#333;text-align:center;text-shadow:rgba(255,255,255,0.5) 0px 1px 0px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);position:relative;padding:7px 0;left:-5px;top:15px;width:120px;background-color:#BFDC7A;background-image:-webkit-gradient(linear,left top,left bottom,from(#BFDC7A),to(#8EBF45));background-image:-webkit-linear-gradient(top,#BFDC7A,#8EBF45);background-image:-moz-linear-gradient(top,#BFDC7A,#8EBF45);background-image:-ms-linear-gradient(top,#BFDC7A,#8EBF45);background-image:-o-linear-gradient(top,#BFDC7A,#8EBF45);color:#6a6340;-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.3);-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.3);box-shadow:0px 0px 3px rgba(0,0,0,0.3);}
.zzsc .ribbon-green:before,.ribbon-green:after{content:"";border-top:3px solid #6e8900;border-left:3px solid transparent;border-right:3px solid transparent;position:absolute;bottom:-3px;}
.zzsc .ribbon-green:before{left:0;}
.zzsc .ribbon-green:after{right:0;}

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