Corner Ribbon Using CSS
CORNER RIBBON
HTML SOURCE
< divclass = " wrapper" >
< divclass = " ribbon-wrapper-green" > < divclass = " ribbon-green" > NEWS </ div> </ div>
</ div>
CSS SOURCE
.wrapper {
margin : 50px auto ;
width : 280px ;
height : 370px ;
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 ;
}
.ribbon-wrapper-green {
width : 85px ;
height : 88px ;
overflow : hidden ;
position : absolute ;
top : -3px ;
right : -3px ;
}
.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) ;
}
.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 ;
}
.ribbon-green :before {
left : 0 ;
}
.ribbon-green :after {
right : 0 ;
}
No comments:
Post a Comment