如何用css制作这个圆形的形状

Question

如何通过保持内部圆形区域透明来制作这种形状？

这里是我想要实现的示例：http://codepen.io/moradxd/pen/EgVVdg

body {
  background: #16c5de;
}

.shape-box {
  width: 80px;
  height: 80px;
  position: relative;
  margin: 100px auto;
}

  .element-1,
  .element-2 {
    display: block;
    position: relative;
  }
  
  .element-1 {
    width: 80px;
    height: 40px;
    background: #fff;
    position: absolute;
    bottom: 0;
    z-index: 0;
  }
  
  .element-2 {
    width: 80px;
    height: 80px;
    background: #16c5de;
    z-index: 1;
    border-radius: 100%;
  }

<div class="shape-box">
  <span class="element-1"></span>
  <span class="element-2"></span>
</div><!-- .shape-box -->

Answer 1

您可以尝试:before或:after伪元素和box-shadow，如下所示。

body {
  background: #007aff;
  padding: 40px;
  margin: 0;
}
.box {
  position: relative;
  overflow: hidden;
  height: 100px;
  width: 100px;
}

.box:before {
  box-shadow: 0 0 0 100px #fff;
  position: absolute;
  border-radius: 100%;
  margin-left: -60px;
  height: 200px;
  content: '';
  width: 120px;
  left: 50%;
  bottom: 0;
} 

<div class="box"></div>