Membuat Bentuk panah dengan css triangle

Meneruskan dari artikel sebelumnya dari teknik pembuatan css triangle, berikutnya saya ingin mendokumentasikan implementasi tampilan lainnya dari css triangle dengan menambahkan elemen :before dan :after, silahkan baca artikel sebelumnya Membuat CSS Border Triangle
Sepintas tentang elemen before dan after bisa digambarkan dengan div dibawah ini :

h2.contoh {
  font:bold 22px Verdana, Arial, Sans-Serif;
  text-align:center;
  color:#000;
}

<h2 class="contoh">
Contoh</h2>

Contoh

Jika kita menambahkan penggunaan elemen :before dan :after akan menjadi seperti ini:

h2.contoh:before {
  content:'Ini ';
color: green;
}

h2.contoh:after {
  content:' Nya';
color: yellow;
}

Contoh

Itu sekilas tentang penggunaan elemen :before dan :after, berikutnya kita lanjutkan untuk membuat bentuh panah dengan css triangle, silahkan perhatikan gambar berikut:

1. CSS3 Ribbon
a. Ribbon 1 dengan menambahan elemen :after

.ribbon1 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#075c85;
  position:relative;
  line-height:48px;
  margin:50px auto;
}
.ribbon1:after {
  content:"";
  position:absolute;
  top:0px;
  left:100%;
  width:0px;
  height:0px;
  border:24px solid transparent;
  border-left-color: yellow;
}

• border:24px solid transparent; hal ini membuat semua border seperti gambar diatas berwarna transparan
• dan border-left-color: yellow; dengan kode ini membuat pengecualian warna transparan bagian kiri atau left berwarna yellow atau kuning

Ribbon 1

b. Berikutnya teknik ribon no 2 dengan elemen :before

.ribbon2 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#075c85;
  position:relative;
  line-height:48px;
  margin:50px auto;
}

.ribbon2:before {
  content:"";
  position:absolute;
  top:0px;
  right:100%;
  width:0px;
  height:0px;
  border:24px solid yellow;
  border-left-color:transparent;
}

• border:24px solid yellow; dengan kode ini membuat tampilan border top, right, bottom, left berwarna yellow atau kuning
• border-left-color:transparent; dengan kode css ini membuat pengecualian untuk border left atau yang kirinya transparan.

Ribbon 2

c. Ribbon no 3 kita akan menggabungkan elemen :after dari ribbon no 1 dengan elemen :before dari ribbon no 2 sehingga kita bisa buat tampilan seperti dibawah ini:

Ribbon 3

.ribbon3 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#075c85;
  position:relative;
  line-height:48px;
  margin:50px auto;
}
.ribbon3:before {
  content:"";
  position:absolute;
  top:0px;
  right:100%;
  width:0px;
  height:0px;
  border:24px solid #075c85;
  border-left-color:transparent;
}
.ribbon3:after {
  content:"";
  position:absolute;
  top:0px;
  left:100%;
  width:0px;
  height:0px;
  border:24px solid transparent;
  border-left-color:#075c85;
}