Bagaimanakah saya boleh mencipta kesan 'bulatan songsang' atau 'potong bulatan' menggunakan CSS3?

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

Mencipta bentuk yang menyerupai "bulatan songsang" atau " potong bulatan" dalam CSS ialah cabaran reka bentuk biasa. Berikut ialah pecahan cara untuk mencapai kesan ini menggunakan teknik CSS 3:

Kemas kini: Pilihan Kecerunan Latar Belakang Jejari CSS3

Untuk penyemak imbas yang menyokong kecerunan latar belakang jejari CSS3 (cth., Firefox , Chrome), "jurang" telus boleh dibuat antara bulatan dan songsangnya potongan:

HTML:

<div>

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;
  -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: -moz-radial-gradient(
    -23px 50%,
    circle closest-corner,
    transparent 0,
    transparent 55px,
    black 56px,
    grey 57px
  );
}

Jawapan Asal:

Menggunakan pengindeksan z dan kedudukan, kesan "bulatan songsang" yang bersih boleh dicapai:

HTML:

<div>

CSS:

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

Kedua-dua kaedah menghasilkan visual yang menarik " kesan bulatan songsang" tanpa memerlukan imej.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta kesan 'bulatan songsang' atau 'potong bulatan' menggunakan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!