Bagaimanakah Saya Boleh Mencipta Segi Tiga Bulat 3 Penjuru dalam CSS Tanpa JavaScript?

Mencipta Segi Tiga Bulat 3 Penjuru dalam CSS

Mencapai bentuk berwarna tersuai dengan bucu bulat tanpa JavaScript boleh mencabar. Untuk menangani perkara ini, teknik CSS boleh digunakan untuk menjana segi tiga yang menarik secara visual dengan estetik yang diingini.

Satu pendekatan untuk mencipta segi tiga bulat 3 penjuru ialah menggunakan berbilang elemen dengan transformasi yang direka dengan teliti dan pelarasan bentuk. Dengan menggunakan elemen pseudo :sebelum dan :selepas, anda boleh mencipta ilusi elemen tunggal berbentuk unik.

Berikut ialah penyelesaian yang diperhalusi yang menawarkan hasil piksel sempurna pada sebarang saiz:

.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, .866);
}
.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}
.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

Menggunakan pendekatan ini, anda boleh mencipta segi tiga yang serba boleh dan menarik secara visual dengan mudah, meningkatkan daya tarikan estetik reka bentuk web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Segi Tiga Bulat 3 Penjuru dalam CSS Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!