html图片顺时针倾斜50度,【资源】纯CSS右上角倾斜四十五度封页角效果

在网上看到一个不错的CSS代码：纯CSS右上角倾斜四十五度封页角效果，不需要图片什么的，就CSS控制。分享给大家！

LANREN

​

.lanren {

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;

}

.lanren .ribbon-lanren-green {

width: 85px;

height: 88px;

overflow: hidden;

position: absolute;

top: -3px;

right: -3px;

}

.lanren .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);

}

.lanren .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;

}

.lanren .ribbon-green:before {

left: 0;

}

.lanren .ribbon-green:after {

right: 0;

}