CSS corner, streamlined ribbon over image

Question

Can I use this feed only with CSS?

Answer 1

HTML:

<div class="box"> <div class="ribbon"> <div class="txt"> Example Text </div> </div> <div>​ 

CSS:

 .box { width: 300px; height: 300px; background-color: #a0a0a0; position: relative; } .ribbon { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); border: 25px solid transparent; border-top: 25px solid #757575; position: absolute; bottom: 20px; right: -50px; padding: 0 10px; width: 120px; color: white; font-family: sans-serif; size: 11px; } .ribbon .txt { position: absolute; top: -20px; left: 20px; }​ 

Example:

http://codepen.io/gilluminate/pen/jusoI

(PS. Everything except rotation will still work in older browsers.)

Answer 2

This is possible with some CSS conversions, which, unfortunately, are not universally supported. See the (quick) example here: http://codepen.io/anon/pen/kBpcK

Answer 3

Yes, you can.

eg:

 <div id="full_img_content"> <span id="img_ribbon"> <img src="#" id=""> </span> </div> 

in CSS you will have

 #full_img_content { float:left; width:400px; (slightly larger than image width) height:400px; (slightly larger than image height) } #full_img_content img // your image (if your img have this size) { width:390px; height:390px; z-index: 1; } #img_ribbon { background-image: url("link to img"); background-positiom: x-pos y-pos bottom right; z-index: 2; }