Berbagi teknologi

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Untuk menggambar segitiga menggunakan CSS3, Anda dapat menggunakan properti batas elemen dan batas transparan untuk mencapai hal ini. Berikut ini contoh kode sederhana:

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边框为透明，控制三角形的左斜边 */
    border-right: 50px solid transparent; /* 右边框为透明，控制三角形的右斜边 */
    border-bottom: 100px solid #f00; /* 底边框为实色，控制三角形的底边 */
}

Dalam contoh ini, kita membuat elemen dengan lebar 0 dan tinggi 0, dan menetapkan tiga batas untuk mengontrol sisi miring kiri, sisi miring kanan, dan alas segitiga. Dengan menyesuaikan lebar dan warna tepinya, Anda dapat menggambar berbagai gaya segitiga.

Anda dapat menerapkan kode di atas ke elemen HTML, misalnya:

 <div class="triangle"></div>

Ini akan menampilkan segitiga di halaman.