Lukis gambar bintang bucu lima guna CSS


- Gambar bintang bucu lima di atas hanya pameran hasil susunan teks dengan CSS, tiada maksud lain. Maklumla, bintang bucu lima pernah menjadi kontroversi dalam penggunaannya pada satu ketika dulu. Kini.. tak taula kontroversi lagi ke tak.
- Bintang ini dikatakan lambang fahaman komunis dan dikaitkan juga dengan Israel. Bintang bucu lima juga dianggap menyerupai lambang yang menjadi simbol bagi agama Baha. Dan ada lagi lain bla bla bla..
- Bergantungla pada cara penggunaan dan tujuan - gambar bintang di post ini hanya untuk demo dan sesuka je.
- Tahukah kita, di logo Jabatan Agama Islam Wilayah Persekutuan (JAWI) ada gambar bintang lima bucu yang menjadi simbolik Rukun Islam?

HTML view (tiada kod animasi)
<div class="lima-bucu-bintang"></div>
<style type="text/css">
 .lima-bucu-bintang {
 margin: 1em auto;
 font-size: 10em;
 position: relative;
 display: block;
 width: 0px;
 height: 0px;
 border-right: 1em solid transparent;
 border-bottom: 0.7em solid #73f3fa;
 border-left: 1em solid transparent;
 transform: rotate(35deg);
}
.lima-bucu-bintang:before {
 border-bottom: 0.8em solid #73f3fa;
 border-left: 0.3em solid transparent;
 border-right: 0.3em solid transparent;
 position: absolute;
 height: 0;
 width: 0;
 top: -0.45em;
 left: -0.65em;
 display: block;
 content:"";
 transform: rotate(-35deg);
}
.lima-bucu-bintang:after {
 position: absolute;
 display: block;
 top: 0.03em;
 left: -1.05em;
 width: 0;
 height: 0;
 border-right: 1em solid transparent;
 border-bottom: 0.7em solid #73f3fa;
 border-left: 1em solid transparent;
 transform: rotate(-70deg);
 content:"";
}
</style>

Ulasan