Cara Membuat Pure CSS Ribbon

MurliCyber    4/05/2015    Blogger , Css3 , Tutorial    Comment   

Yeay, ternyata css selain untuk membuat widget widget css juga bisa lo membuat ribbon sederhana, 

jadi buat kalian yang ingin membuat ribbon, tidak perlu membuat gambar lagi, karena kalian bisa membuat nya sendiri dengan css

<div class="non-semantic-protector"> 
  <h1 class="ribbon">
    <strong class="ribbon-content">This is ribbons</strong>
  </h1>
</div>

.non-semantic-protector {
    position: relative;
    z-index: 1;
}

.ribbon {
    font-size: 16px !important;
    width: 50%;
    position: relative;
    background: #ba89b6;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #986794;
    z-index: -1;
}

.ribbon:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #804f7c transparent transparent transparent;
    bottom: -1em;
}

.ribbon .ribbon-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon .ribbon-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
}

Demo

Semoga Bermanfaat.

Sumber