css怎樣生成反方向圓角

<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>
用一個背景顏色的圓定位。

after一個div 高寬一樣 border-radius:50% background-color設置成那個灰色北京 之后定為到對應位置

假如那個缺口的半徑是5px;
你可以這么實現(xiàn)：

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

可以試一下

正常用css畫兩個圓，然后通過具體定位放置在相應的位置就可以了。
父級元素relative，圓absolute，然后通過top、left、right、bottom來設置具體出現(xiàn)位置。
這不是唯一辦法，選擇一種你覺得最舒服的方式就行。

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]