Bagaimanakah Saya Boleh Memotong Bulatan Daripada Segiempat Segiempat Dengan Cekap Menggunakan CSS?

Menggunakan CSS untuk Memotong Bulatan Daripada Bentuk Segi Empat

Cabaran untuk mencipta bulatan lutsinar yang dipotong daripada bentuk segi empat tepat telah mencetuskan perbincangan dalam talian. Walaupun beberapa penyelesaian wujud, terdapat had dan pepijat yang menyebabkan pengguna mencari alternatif.

Pendekatan Alternatif Menggunakan Kecerunan Radial

Satu pendekatan alternatif kepada penyelesaian awal terletak pada menggunakan kecerunan jejari pada unsur induk. Kecerunan ini mencipta bentuk bulat, manakala unsur pseudo digunakan untuk menentukan bulatan sebenar. Penanda yang dipermudahkan ini menghapuskan keperluan untuk berbilang div dan menangani pepijat yang dikaitkan dengan IE 10/11.

div:before {  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;  /* top = -75px, radius = 45px, so circle's center point is at -30px */
  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);  /* use same center point as with concentric circles but larger radius */
}

Dengan menggunakan pendekatan kecerunan jejarian ini, anda boleh memotong bulatan daripada bentuk segi empat tepat dengan berkesan, mengelakkan had penyelesaian terdahulu dan memastikan keserasian merentas penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memotong Bulatan Daripada Segiempat Segiempat Dengan Cekap Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!