5

It is possible to achieve this ribbon using only CSS?

Example image of ribbon I'm trying to create in CSS

Alec Rust
  • 10,532
  • 12
  • 48
  • 63
  • 1
    Have you tried anything...why not position and image? – Rchristiani Oct 25 '12 at 15:36
  • if you leave off the little wrap-around edges, it's quite simple. Though IE8 and below would not support it. – Jason Oct 25 '12 at 15:57
  • 1
    As Rchristiani said, `1` a transparent PNG that's absolutely positioned can easily do the trick. It will require pixel precision and won't be "flexible" but work well cross-browser. `2` CSS3 transforms might have something that could be more flexible but lose more cross-browser capacity. You could also prob. do a `3`"sliding door" like technique to with multiple images to have something more flexible. #1 would be the easiest to implement. – jmbertucci Oct 25 '12 at 16:07
  • 1
    Thanks, I know this can be archived with an image :). Question is: is this design achievable using only CSS. @Jason I'd be interested in your solution since I can't seem to trim off the trailing ends of the overlay correctly. – Alec Rust Oct 25 '12 at 20:01
  • I'm working on a JSFiddle for you. I've done this before, so I know it's possible. – Jason Oct 25 '12 at 23:31

1 Answers1

13

.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;
}​
<div class="box">
    <div class="ribbon">
        <div class="txt">
            Example Text
        </div>
    </div>
<div>​
miken32
  • 42,008
  • 16
  • 111
  • 154
Jason
  • 2,280
  • 23
  • 22