html - 如何切割溢出的div css

Question

我需要知道如何从蓝色框中切下灰色部分。

下图中的红色箭头显示了我想从蓝色框中剪切的部分。这是我的代码:

.father {
  height: 400px;
  width: 400px;
  margin: 150px auto;
  position: relative;
}

.border {
  position: relative;
  bottom: 50px;
  margin: auto;
  border-radius: 50%;
  width: 96%;
  height: 30%;
  background-color: #DDD;
}
	

<div class="father">
  <div class="border"></div>
</div>

Answer 1

据我了解，您希望将蓝色区域之外的灰色部分剪掉。如果是这样，请按以下步骤操作。

.father {
  height: 400px;
  width: 400px;
  margin: 150px auto;
  position: relative;
  background: lightblue;
  overflow: hidden;
}

.border {
  position: relative;
  bottom: 50px;
  margin: auto;
  border-radius: 50%;
  width: 96%;
  height: 30%;
  background-color: #DDD;
  z-index: 1;
}

<div class="father">
  <div class="border"></div>
</div>