Membuat Bentuk Segitiga Dengan CSS


oke , kali ini saya akan memberikan tutorial mengenani CSS , disini saya akan membuat bentuk segitiga dengan CSS , oke langsung aja :

1. buka dreamweaver atau notepad , lalu copykan script berikut ini -->


#segitiga-atas
{

 width:0px;
 height:0px;
 border-left:50px solid transparent;
 border-right:50px solid transparent;
 border-bottom:50px solid #000;

}
#segitiga-bawah
{

 width:0px;
 height:0px;
 border-left:50px solid transparent;
 border-right:50px solid transparent;
 border-top:50px solid #000;

}
#segitiga-kanan
{
 width:0px;
 height:0px;
 border-top:50px solid transparent;
 border-bottom:50px solid transparent;
 border-left:50px solid #000;
}
#segitiga-kiri
{

 width:0px;
 height:0px;
 border-top:50px solid transparent;
 border-bottom:50px solid transparent;
 border-right:50px solid #000;

}

lalu save dengan nama style.css
kemudia buat halaman index.html , ketikan script berikut ini , don't copas hahaha.

<html>
<head><title>green cyber</title></head>
<link href="style.css" rel="styleshee" type="text/css">
<body>
<div id="segitiga-atas"><div>
<div id="segitiga-bawah"><div>
<div id="segitiga-kiri"><div>
<div id="segitiga-kanan"><div>
</body>
</html>


--> save dengan nama index.html 
lalu jalankan index.html di web browser anda
maka hasilnya akan seperti ini :



Oke semoga bermanfaat dan tunggu tutorial selanjut , Terima Kasih :D



Belum ada Komentar untuk "Membuat Bentuk Segitiga Dengan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel