Recently found that CSS can make a corner ribbon effect, with the Transform:rotate property on the line.
Let's put one first:
Release code:
<!DOCTYPE HTML> <HTMLLang= "en"> <Head> <MetaCharSet=utf-8> <title>Corner Ribbon with CSS3 Example</title> <styletype= "Text/css">. Ribbon{Background-color:#a00;Overflow:Hidden;White-space:nowrap; /*Top left corner*/position:Absolute; Left:-50px;Top:40px; /*For deg rotation*/-webkit-transform:Rotate ( -45deg);-moz-transform:Rotate ( -45deg);-ms-transform:Rotate ( -45deg);-o-transform:Rotate ( -45deg);Transform:Rotate ( -45deg); /*For creating Shadow*/-webkit-box-shadow:0 0 10px #888;-moz-box-shadow:0 0 10px #888;Box-shadow:0 0 10px #888; }. Ribbon a{Border:1px solid #faa;Color:#fff;Display:Block;Font:Bold 100% ' Helvetica Neue ', Helvetica, Arial, Sans-serif;margin:1px 0;padding:10px 50px;text-align:Center;text-decoration:None; /*For creating Shadow*/Text-shadow:0 0 5px #444; } </style> </Head> <Body> <Divclass= "Ribbon"> <ahref="#">Hello Yojiaku</a> </Div> </Body> </HTML>
Plus the style you want, how, is not easy to knock!
Just flipped a DIV 45 degrees.
Draw a corner ribbon with CSS