Efek Pita Tiga Dimensi dengan CSS

Pita Tiga Dimensi

Mungkin beberapa dari Anda tidak percaya bahwa gambar di atas adalah murni dibuat dengan CSS3. Ya, itu adalah salah satu pemanfaatan CSS Triangle yang menurut Saya paling sempurna:

CSS

.rb-wrap {
  position:relative;
  z-index:1;
}

.ribbon {
  width:60%;
  font:normal bold 16px Arial,Sans-Serif !important;
  position:relative;
  background-color:#ba89b6;
  color:white;
  text-align:center;
  padding:1em 2em;
  margin:0 auto 3em;
  /* Saya tambahkan sedikit efek bayangan */ 
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2); 
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.2);
}

.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;
}

HTML

<div class="rb-wrap">
  <p class="ribbon">
    <strong class="ribbon-content">Pita Tiga Dimensi</strong>
  </p>
</div>

Unsur-Unsur Pembangun

Gambar di bawah ini memang tidak begitu menjelaskan tentang bagaimana efek pita tersebut terbentuk, tapi setidaknya gambar-gambar ini bisa memberikan sedikit petunjuk:

Ide Kreatif: James Koster