Bagaimanakah Saya Boleh Mencipta Bentuk 'Bulatan Songsang' Hanya Menggunakan CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mencipta Bentuk 'Bulatan Songsang' Hanya Menggunakan CSS?

DDD

Lepaskan： 2024-12-10 14:33:10

asal

445 orang telah melayarinya

How Can I Create an

Mencipta Bentuk "Bulatan Songsang" dengan CSS

Konsep "bulatan songsang" merujuk kepada bentuk yang menggabungkan bulatan pepejal dengan potongan songsang untuk mencipta kesan yang unik. Walaupun mencapai bentuk ini dengan CSS mungkin kelihatan mencabar, ia boleh dilakukan tanpa menggunakan sebarang imej.

Penyelesaian Gradien Latar Belakang

Satu pendekatan melibatkan penggunaan kecerunan latar belakang jejari CSS3. Penyelesaian ini membolehkan anda mencipta jurang antara bulatan dan potongannya, menghasilkan kesan yang lebih rumit.

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;
  /* Adjust margin/padding for desired "gap" */
  padding-left: 30px;
  margin-left: -30px;
  /* Real borders */
  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;
  /* Inverse circle "cut" */
  background-image: -moz-radial-gradient(
    -23px 50%,
    circle closest-corner,
    transparent 0,
    transparent 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);
  background-image: -ms-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: -o-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: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

Salin selepas log masuk

Z- Penyelesaian Indeks

Pendekatan lain memfokuskan pada penggunaan pengindeksan-z untuk mencipta kesan bulatan songsang. Ini memerlukan elemen penentududukan dengan teliti untuk mencapai hasil yang diingini.

HTML:

<div>

Salin selepas log masuk

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Bentuk 'Bulatan Songsang' Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!