CSS 3 形状：“倒圆”或“切出圆”

Question

所以我试图在 CSS 中找出一个反圆/切出的圆。目前我通过ScottS找到了this answer。

他的代码非常适合我，就在我现在正在寻找相同的效果，但在 <div> 元素的另一边。所以不是在左侧有一个切口，而是在右侧。

这是现有的代码：

body {
  padding: 10px;
  background: url(http://www.dummyimage.com/12x16/ff0000/ffffff.png&text=X++) top left repeat;
}

.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;
  /* need to play with margin/padding adjustment
       based on your 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;
  /* the inverse circle "cut" */
  background-image: -moz-radial-gradient( -23px 50%, /* the -23px left position varies by your "gap" */
  circle closest-corner, /* keep radius to half height */
  transparent 0, /* transparent at center */
  transparent 55px, /*transparent at edge of gap */
  black 56px, /* start circle "border" */
  grey 57px/* end circle border and begin color of rest of background */
  );
  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);
}

<div id="a" class="inversePair">A</div>
<div id="b" class="inversePair">B</div>

那么我该如何镜像呢？

Answer 1

您可以使用以下解决方案（原始答案）：

body {
  padding: 10px;
  background: url(http://www.dummyimage.com/12x16/ff0000/ffffff.png&text=X++) top left repeat;
}
.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;
  /* need to play with margin/padding adjustment
       based on your desired "gap" */
  padding-right: 30px;
  margin-right: -30px;
  /* real borders */
  border-right: none;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  /* the inverse circle "cut" */
  background-image: -moz-radial-gradient(calc(100% + 23px) 50%, /* the -23px left position varies by your "gap" */
  circle closest-corner, /* keep radius to half height */
  transparent 0, /* transparent at center */
  transparent 55px, /*transparent at edge of gap */
  black 56px, /* start circle "border" */
  grey 57px/* end circle border and begin color of rest of background */
  );
  background-image: -webkit-radial-gradient(calc(100% + 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(calc(100% + 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(calc(100% + 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(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

<div id="b" class="inversePair">B</div>
<div id="a" class="inversePair">A</div>

---

原答案（优化版）-code on JSFiddle：

body {
  padding:10px;
}

/** the common design of the items. */
#a, #b {
  border:1px solid black;
  display:inline-block;
  height:100px;
  line-height:100px;
  position:relative;
  text-align:center; 
  vertical-align:middle;
}

/** the design of item A (cicle). */
#a {
  background:grey;
  border-radius:50%;
  width:100px;
  z-index:1;
}

/** the design of item B (cut out). */
#b { 
  width: 200px;
  
  /** the gap between item  A and B. */
  margin:0 -20px 0 0;
  padding:0 40px 0 0;
  
  /** the real border. */
  -webkit-border-radius:20px 0 0 20px;
  -moz-border-radius:20px 0 0 20px;
  border-radius:20px 0 0 20px;
  border-width:1px 0 1px 1px;
  
  /** the cut out on the right side. */
  background-image: -moz-radial-gradient(calc(100% + 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(calc(100% + 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(calc(100% + 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(calc(100% + 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(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

<div id="b">B</div>
<div id="a">A</div>

---

另一种实现简单对齐的解决方案 - code on JSFiddle:

body {
  padding:10px;
}

/** the common design of the items. */
#a, #b {
  border:1px solid black;
  display:inline-block;
  height:100px;
  line-height:100px;
  position:relative;
  text-align:center;
  vertical-align:middle;
}

/** the alignment of the items. */
.item-align-left, .item-align-right {
  display:flex;
  margin-bottom:10px;
}
.item-align-left #a, .item-align-right #b { 
  order:1;
}
.item-align-right #a, .item-align-left #b {
  order:2;
}

/** the design of item A (cicle). */
#a {
  background:grey;
  border-radius:50%;
  width:100px;
  z-index:1;
}

/** the design of item B (cut out). */
#b {
  width: 200px;
}

/** the right aligned item B (cut out on right side). */
.item-align-right #b {
  
  /** the gap between item  A and B. */
  margin:0 -20px 0 0;
  padding:0 40px 0 0;
  
  /** the real border. */
  -webkit-border-radius:20px 0 0 20px;
  -moz-border-radius:20px 0 0 20px;
  border-radius:20px 0 0 20px;
  border-width:1px 0 1px 1px;
  
  /** the cut out on the right side. */
  background-image: -moz-radial-gradient(calc(100% + 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(calc(100% + 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(calc(100% + 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(calc(100% + 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(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

/** the left aligned item B (cut out on left side). */
.item-align-left #b {
  
  /** the gap between item  A and B. */
  margin:0 0 0 -20px;
  padding:0 0 0 40px;
  
  /** the real border. */
  -webkit-border-radius:0 20px 20px 0;  
  -moz-border-radius:0 20px 20px 0;  
  border-radius:0 20px 20px 0;
  border-width:1px 1px 1px 0; 
  
  /** the cut out on the left side. */
  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);
  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);
}

<div class="item-align-right">
  <div id="a">A</div>
  <div id="b">B</div>
</div>
<div class="item-align-left">
  <div id="a">A</div>
  <div id="b">B</div>
</div>