Segi tiga

Biasanya jika kita ingin menempatkan simbol teks segi tiga di blog, kita akan menaip kod html atau copy/paste simbol terus dari mana-mana sumber. Bagaimanapun, jika kita rajin sangat dan ingin menjadi lebih kreatif dengan bentuk segi tiga yang lebih besar, kita boleh guna CSS.

Contoh beberapa kod html simbol teks segi tiga
▲ ▲   ▶ ▶   ▼ ▼   ◀ ◀

Pamer tak sudah

3

Contoh CSS membentuk segi tiga

<div class="segi3atas"></div>
<style type="text/css">
 .segi3atas {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid brown;
    }
</style> 

<div class="segi3kanan"></div>
<style type="text/css">
.segi3kanan {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-left: 100px solid brown;
      border-bottom: 50px solid transparent;
    }
</style> 

<div class="segi3bawah"></div>
<style type="text/css">
.segi3bawah {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid brown;
    }
</style> 

<div class="segi3kiri"></div>
<style type="text/css">
.segi3kiri {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 100px solid brown;
      border-bottom: 50px solid transparent;
    }
</style>