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

Mencapai Segitiga Bulat Tiga Penjuru dengan CSS

Dalam artikel ini, kami akan menangani cabaran mencipta tiga penjuru berwarna tersuai segi tiga bulat menggunakan CSS tulen, tanpa sokongan kanvas JavaScript atau HTML5.

Masalah Kenyataan

Matlamatnya adalah untuk mencipta bentuk seperti yang ditunjukkan di bawah tanpa menggunakan tindanan imej atau teknik berasaskan JS.

[Imej segi tiga bulat tiga penjuru]

Penyelesaian

Berikut ialah penyelesaian CSS elegan yang diilhamkan oleh idea asal pengarang:

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

Penjelasan

Penyelesaian ini menggabungkan berbilang transformasi CSS untuk mencapai bentuk yang diingini:

• .triangle: Mentakrifkan segi tiga tapak dan menetapkan latar belakangnya warna.
• .segitiga:sebelum, .segitiga:selepas: Dua unsur pseudo ditambah untuk sudut tambahan.
• Dimensi berasaskan peratusan : Semua elemen mempunyai lebar dan ketinggian 10em untuk memastikan ia berskala sama pada mana-mana saiz.
• Jejari sempadan-atas-kanan: Menetapkan jejari penjuru kanan sebelah atas, mencipta kesan bulat.
• Transformasi: Satu siri putaran, senget dan skala digunakan untuk memutar segi tiga dan melaraskan bentuk bujurnya. Nilai tertentu mungkin memerlukan sedikit pelarasan bergantung pada nisbah bidang yang diingini.

Hasil akhir ialah segi tiga bulat tiga penjuru sempurna piksel, direka sepenuhnya dengan CSS.

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!