Search code examples
cssribbon

Angled, wrapping CSS ribbon over image


It is possible to achieve this ribbon using only CSS?

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


Solution

  • .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>​