Pita Tiga Dimensi
Mungkin beberapa dari Anda tidak percaya bahwa gambar di atas yaitu murni dibentuk dengan CSS3. Ya, itu yaitu salah satu pemanfaatan CSS Triangle yang berdasarkan 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 perihal bagaimana efek pita tersebut terbentuk, tapi setidaknya gambar-gambar ini dapat menawarkan sedikit petunjuk:
Ide Kreatif: James Koster