Bagaimanakah Saya Boleh Mencipta Segi Tiga Bulat Tiga Penjuru Hanya Menggunakan CSS?

Mencipta Segitiga Tiga Penjuru dalam CSS

Mencipta bentuk tersuai menggunakan CSS tanpa JavaScript boleh menjadi satu cabaran, terutamanya apabila menyasarkan ketepatan sempurna piksel. Satu tugas biasa ialah mencipta segi tiga bulat tiga penjuru, yang boleh didekati menggunakan pelbagai teknik.

Penyelesaian CSS Sahaja:

Untuk mencapai tiga penjuru -segi tiga bulat menggunakan CSS tulen, pertimbangkan penyelesaian berikut:

.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%);
}

Kaedah ini menggunakan transformasi CSS, condong dan penskalaan untuk menghasilkan bentuk yang dikehendaki. Ia menawarkan ketepatan sempurna piksel dan agak intuitif untuk difahami.

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