Bagaimana Membuat Bentuk Bulatan Songsang atau Potongan Menggunakan CSS?

Bentuk CSS 3: "Bulatan Songsang" atau "Bulatan Potong"

Dalam CSS, bulatan songsang atau bulatan potong ialah bentuk yang menyerupai bulatan dengan bahagian potongan. Ia boleh dicapai menggunakan pelbagai teknik, tetapi dua kaedah biasa termasuk:

Menggunakan Elemen Bersarang dan Kedudukan Mutlak

Kaedah ini melibatkan mencipta dua elemen bersarang, bulatan dalam (#a) untuk membentuk bahagian bulatan pepejal, dan bentuk luar (#b) yang mengandungi indeks z negatif untuk meletakkannya di belakang bulatan dalam. Bentuk luar mempunyai bahagian potongan melengkung yang dicapai melalui sempadan CSS dan jidar negatif/pelarasan padding.

Kod Contoh:

<div>

.inversePair {
  border: 1px solid black;
  background: grey;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
}

#a:before {
  content: ' ';
  left: -6px;
  top: -6px;
  position: absolute;
  z-index: -1;
  width: 112px;
  height: 112px;
  border-radius: 56px;
  background-color: white;
}

#b {
  width: 200px;
  z-index: -2;
  padding-left: 50px;
  margin-left: -55px;
  overflow: hidden;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#b:before {
  content: ' ';
  left: -58px;
  top: -7px;
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 57px;
  background-color: black;
}

Menggunakan Kecerunan Latar Belakang Radial dan Kedudukan Mutlak

Kaedah lain melibatkan mencipta bulatan menggunakan kecerunan latar belakang jejari CSS3 dan meletakkan margin negatif div kedudukan mutlak untuk mencipta kesan potong. Pilihan ini sesuai untuk penyemak imbas yang menyokong kecerunan jejarian CSS.

Kod Contoh:

<div>

.inversePair {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
  background: grey;
  z-index: 1;
}

#b {
  width: 200px;
  padding-left: 30px;
  margin-left: -30px;
  border-left: none;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: /* radial-gradient syntax for various browsers */;
}

Teknik ini menyediakan pilihan yang fleksibel untuk mencipta bulatan songsang atau potong dalam CSS tanpa bergantung pada imej. Pilihan yang sesuai bergantung pada keserasian penyemak imbas, keperluan reka bentuk dan kesan yang diingini.

Atas ialah kandungan terperinci Bagaimana Membuat Bentuk Bulatan Songsang atau Potongan Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!