在盒子的角上切一个圆圈

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

伪元素:

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;
}

<div></div>