CSS3를 사용하여 '역원' 또는 '원 잘라내기' 효과를 어떻게 만들 수 있나요?

CSS 3 모양: "역원" 또는 "원 잘라내기"

"역원" 또는 " CSS에서 원 잘라내기'는 일반적인 디자인 문제입니다. CSS 3 기술을 사용하여 이 효과를 얻는 방법은 다음과 같습니다.

업데이트: CSS3 방사형 배경 그라데이션 옵션

CSS3 방사형 배경 그라데이션을 지원하는 브라우저(예: Firefox) , Chrome), 원과 그 반대 사이에 투명한 "간격"을 만들 수 있습니다. 컷아웃:

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.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
  );
}

원래 답변:

Z-인덱싱 사용 및 위치 지정을 통해 깔끔한 "역원" 효과를 얻을 수 있습니다:

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.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;
}

두 가지 방법 모두 이미지 없이도 시각적으로 매력적인 '역원' 효과를 얻을 수 있습니다.