html - 在盒子的 Angular 上切圆

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>