Bagaimana untuk Mencipta Segi Tiga Sudut Bulat menggunakan HTML dan CSS sahaja?

Cara membuat segitiga dengan tiga sudut bulat menggunakan HTML dan CSS

Untuk mencipta segitiga dengan tiga sudut bulat tanpa menggunakan JavaScript, anda boleh menggunakan transformasi CSS dan memutar, condong dan menskalakan elemen div HTML.

Berikut ialah contoh kod HTML dan CSS yang anda boleh menggunakan:

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

.triangle {
  position: relative;
  background-color: orange;
  text-align: left;
}

.triangle:before,
.triangle:after {
  content: '';
  position: absolute;
  background-color: inherit;
}

.triangle,
.triangle:before,
.triangle:after {
  width: 10em;
  height: 10em;
  border-top-right-radius: 30%;
}

.triangle {
  transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
}

.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
}

.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}

Kod ini akan mencipta segi tiga dengan sudut bulat yang akan berskala dan mengekalkan bentuknya dengan sempurna pada sebarang saiz. Ia menggunakan matematik yang lebih mudah daripada penyelesaian asal dan menyediakan pendekatan intuitif untuk mencipta kesan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Segi Tiga Sudut Bulat menggunakan HTML dan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!