Bagaimana Membuat Bentuk Bulatan Songsang Menggunakan CSS3?

Bentuk CSS 3: Bulatan Songsang atau Bulatan Potong

Soalan:

Bagaimana saya boleh mencipta "bulatan songsang " bentuk, di mana pinggir luar bekas dipotong bulat, meninggalkan bulatan pepejal di dalam tengah?

Jawapan:

Pilihan Kecerunan Latar Belakang Jejari CSS3

(Untuk penyemak imbas moden seperti Firefox, Chrome, Safari, dan IE10)

Penyelesaian yang dipertingkatkan ini membolehkan "jurang" telus antara bulatan dan songsangnya potongan:

CSS:

.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;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: -moz-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

Jawapan Asal:

<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;
  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;
}

Kedua-dua penyelesaian menghasilkan kesan "bulatan songsang" yang menyenangkan secara visual, mencapai bentuk yang anda inginkan tanpa perlu imej.

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