Melukis segitiga (pelbagai sudut) dengan tutorial CSS_Basic tulen

Halaman web kami mempunyai gaya yang sentiasa berubah kerana CSS. Bahasa gaya yang kelihatan mudah ini sangat fleksibel digunakan Selagi anda menggunakan kreativiti anda, anda boleh mencapai lebih banyak kesan yang tidak dapat dibayangkan. Terutama dengan penggunaan CSS3 yang meluas, lebih banyak karya CSS novel telah muncul.

Hari ini saya akan membawakan kepada anda kaedah lukisan segi tiga CSS

Salin kod The kod adalah seperti berikut:

#segi tiga-atas {
lebar: 0;
tinggi: 0;
sempadan-kiri: 50px pepejal lutsinar;
sempadan-kanan : 50px pepejal lutsinar;
sempadan bawah: 100px pepejal merah;
}

Salin kod Kod adalah seperti berikut:

#triangle- bawah {
lebar: 0;
tinggi: 0;
sempadan-kiri: 50px pepejal lutsinar;
sempadan-kanan: 50px pepejal lutsinar;
sempadan-atas: 100px pepejal merah;
}

Salin kod Kod adalah seperti berikut:

#triangle- kiri {
lebar: 0;
tinggi: 0;
sempadan atas: 50px pepejal lutsinar;
sempadan-kanan: 100px pepejal merah;
sempadan-bawah: 50px pepejal lutsinar;
}

Salin kod Kod adalah seperti berikut:

#triangle- kanan {
lebar: 0;
tinggi: 0;
sempadan atas: 50px pepejal lutsinar;
sempadan-kiri: 100px pepejal merah;
sempadan-bawah: 50px pepejal lutsinar;
}

Salin kod Kod adalah seperti berikut:

#triangle- topleft {
lebar: 0;
tinggi: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

Salin kod Kod adalah seperti berikut:

#triangle- kanan atas {
lebar: 0;
tinggi: 0;
sempadan atas: 100px merah pepejal;
jidar-kiri: 100px pepejal lutsinar; >

Salin kod

Kod adalah seperti berikut:#triangle- kiri bawah { lebar: 0;

tinggi: 0;

sempadan-bawah: 100px merah pepejal;
sempadan-kanan: 100px pepejal lutsinar;
}

Salin kod

Kod adalah seperti berikut:

#segi tiga-bawah kanan {
    lebar: 0;
    tinggi: 0;
    bahagian bawah sempadan: 100px merah pepejal;
    sempadan-kiri: 100px padat }