在盒子的角落切圆圈

Question

我想删除大部分圆圈，只显示与正方形重叠的圆圈部分：

我需要切割红色区域并在盒子内留下较深的绿色区域。

我有一个名为circle的类，其风格为

position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 100px;

和一个风格框：

width: 100px;
height: 100px;

如何删除红色区域？ 我的代码：https://codepen.io/anon/pen/xpVJoL

Answer 1

您可以对位置使用否定值，并使用overflow:hidden隐藏（剪切）该区域：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position:relative;
  overflow:hidden;
}

.circle {
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
}

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

<强>更新

如果你想要一个更加奇特的方式，你可以使用radial-gradient作为背景，你将需要更少的代码来处理：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid;
  background-image:radial-gradient(circle at bottom left, red 45%, transparent 0%);
}

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

Answer 2

只需在overflow:hidden;课程中插入.container。

Answer 3

您不需要其他 div ，您只需使用:before或:after 伪元素：< / p>

＆＃13;

＆＃13;

div {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid;
  overflow: hidden;
}

div:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: -50%;
  border-radius: 50%;
  background: red;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;