Membuat Sudut dengan Border

Semua contoh di bawah ini menggunakan tag <div>, dengan tanpa konten:
<div syle="style value"></div>

contoh border sederhana

Contoh border sederhana di atas menggunakan style:

border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: 20px solid blue;
border-right: 20px solid green;

Dengan sedikit trik, border diatas bisa menjadi lebih menarik dengan menghilangkan konten. Karena browser tertentu akan mengabaikan tag tanpa konten menjadi spasi kosong, jadi CSS tersebut harus ditambah seperti di bawah ini:

font-size: 0px; line-height: 0%; width: 0px; 
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: 20px solid blue;
border-right: 20px solid green;

Jika border kiri dihilangkan akan menjadi seperti ini:

font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-right: 20px solid green;

2 border dihilangkan menjadi:

font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-right: 20px solid green;

Jika salah 1 dibuat transparan akan menjadi seperti ini:

font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-right: 20px solid transparent;

Dengan dasar di atas kita bisa membuat berbagai bentuk dasar seperti di bawah ini.

font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #77e;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

font-size: 0px; line-height: 0%; width: 0px;
border-bottom: 20px solid #77e;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

font-size: 0px; line-height: 0%; width: 0px;
border-top: 10px solid #transparent;
border-right: 20px solid #77e;
border-bottom: 10px solid #transparent;

font-size: 0px; line-height: 0%; width: 0px;
border-top: 10px solid transparent;
border-left: 20px solid #77e;
border-bottom: 10px solid transparent;

font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #77e;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #77e;

font-size: 0px; line-height: 0%; width: 0px;
border-left: 20px solid #77e;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid #77c;

taken from: howtocreate.co.uk