css怎样生成反方向圆角

Question

下面这个效果（这个小口）怎么生成？

Answer 1

<div style="width:300px; height:300px; position:relative; background-color:#000">
<div style="width:30px; height:30px; border-radius:50%; position:absolute; top:-15px; right:-15px; background-color:#fff"></div>
</div>
用一个背景颜色的圆定位。

Answer 2

正常用css画两个圆，然后通过具体定位放置在相应的位置就可以了。
父级元素relative，圆absolute，然后通过top、left、right、bottom来设置具体出现位置。
这不是唯一办法，选择一种你觉得最舒服的方式就行。

Answer 3

after一个div 高宽一样 border-radius:50% background-color设置成那个灰色北京 之后定为到对应位置

Answer 4

html:
<div class="test" >
  <div class="test1" ></div>
  <div class="test2" ></div>
</div>

css:
      .test1,.test2{
    width: 200px;
    height: 100px;
  }
  .test1{
    background: radial-gradient(circle at bottom left, transparent 15px, #b4a078 16px);
  }
  .test2{
    background: radial-gradient(circle at top left, transparent 15px, #b4a078 16px);
  }    ![图片描述][1]

Answer 5

假如那个缺口的半径是5px;
你可以这么实现：

.radius{
    width:10px;
    height:10px;
    border-radius:50%;
    border:1000px solid #fff;//边框足够大就行
    ...
}

可以试一下