Bagaimana untuk memotong bulatan dari segi empat tepat menggunakan CSS sahaja?

Potong Bulatan daripada Bentuk Segi Empat dalam CSS

Satu pendekatan untuk mencipta kesan ini adalah dengan menggunakan gabungan elemen dan bijak penggunaan jejari sempadan. Walau bagaimanapun, teknik ini mengalami kelemahan yang berpotensi, seperti markup yang tidak teratur dan jurang yang tidak sedap dipandang dalam pelayar tertentu.

Pendekatan Alternatif

Nasib baik, terdapat kaedah alternatif yang menggunakan unsur tunggal bersama unsur pseudo. Pendekatan ini memanfaatkan kuasa latar belakang kecerunan jejari untuk elemen induk, manakala elemen pseudo berfungsi sebagai potongan bulatan lutsinar.

Pertimbangkan coretan kod berikut:

div:before {
  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

Penjelasan

• Elemen div mentakrifkan segi empat tepat bentuk, lengkap dengan bucu bulat.
• Di dalam div, elemen pseudo :sebelum mencipta potongan bulat menggunakan kedudukan mutlak dan sempadan merah pepejal.
• Kesan jurang dan isian lutsinar dicapai melalui aplikasi latar belakang kecerunan jejari pada elemen div. Kecerunan mewujudkan kawasan lutsinar di tengah, yang bertindih dengan bulatan elemen pseudo, menghasilkan kesan potongan.

Teknik ini menawarkan beberapa kelebihan:

• Ia menghapuskan keperluan untuk elemen tambahan, memudahkan penanda.
• Ia berfungsi secara konsisten merentas pelayar tanpa sebarang ketara. artifak.
• Bulatan boleh dipusatkan dengan tepat dalam segi empat tepat menggunakan pengiraan mudah.

Dengan melaksanakan pendekatan alternatif ini, anda boleh memotong bulatan daripada bentuk segi empat tepat dalam CSS dengan berkesan, mencapai hasil visual yang diingini tanpa kerumitan dan kesulitan kaedah sebelumnya.

Atas ialah kandungan terperinci Bagaimana untuk memotong bulatan dari segi empat tepat menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!