Html 极限形状'；s与CSS的边界

我需要达到一种类似于中的效果

但是我在那里使用的代码太具体，不太干净。正如你所看到的，我使用了相当多的元素，也使用了一些具有非常特定角度计算的变换

有没有一种方法可以让我创造这个形状，让它保持灵敏但更干净？ 请注意，我不想要半个圆，而是一个我可以适应的非常特定的角度。我的意思是圆可以或多或少地在矩形内，所以弧的角度会或多或少地大

CSS:

.rectangle {
  background-color: white;
  width:200px;
  height:200px;
  border:solid 1px navy;
}
.circle {
  position: relative;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: white;
  margin-top:calc(50% - 35px);
  margin-left:calc(100% - 50px);
}
.arc {
  overflow: hidden;
  position: absolute;
  top: -1px; right: 50%; bottom: 50%; left: -1px;
  transform-origin: 100% 100%;
  transform: rotate(115deg);
}
.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 1px navy;
  width: 200%; height: 200%;
  border-radius: 50%;
  content: '';
}

.arc2 {
  overflow: hidden;
  position: absolute;
  top: -1px; right: 50%; bottom: 50%; left: -1px;
  transform-origin: 100% 100%;
  transform: rotate(155deg);
}
.arc2:before {
  box-sizing: border-box;
  display: block;
  border: solid 1px navy;
  width: 200%; height: 200%;
  border-radius: 50%;
  content: '';
}

HTML:

<div class='rectangle'>
  <div class='circle'>
    <div class='arc'></div>
    <div class='arc2'></div>
  </div>
</div>

注意事项：

<div class='rectangle'>
  <div class='circle'>
    <div class='arc'></div>
    <div class='arc2'></div>
  </div>
</div>

我不能使用z-index，这是我的第一个解决方案，但它会导致其他问题

矩形的高度可能会改变，因此我需要它具有响应性，但即使容器的高度变大，圆形的高度也应该保持不变

我可以使用SVG，如果这是一个选项的话

---

我通常建议对此类形状使用SVG，因为使用SVG可以更容易地创建和维护圆弧。使用SVG还意味着更好地控制半径、圆弧的起始角和结束角等，但我认为我们无法使形状的一部分（矩形）具有响应性，同时使其他部分保持静态（圆的高度），因此使用CSS可能更安全

同样在CSS中，使用单个元素很难实现这一点，因为您已经指出不能使用

z-index

。其他方法（如使元素的宽度大于高度或使用比例）将产生椭圆弧，并且在高度或宽度更改时还需要调整定位属性

考虑到所有这些因素，下面使用两个元素和一个伪元素的方法可能是最好的选择。

.inner

元素位于

.rectangle

右边框的顶部，其宽度刚好足以显示圆。在

.inner

元素内，创建圆的伪元素以负左偏移放置，因此只有圆的一部分可见（因为溢出隐藏在

.inner

上）。输出是响应的

.rectangle{
位置：相对位置；
背景色：白色；
宽度：200px；
高度：200px；
边界：坚固的1px海军；
}
.内部{
位置：绝对位置；
左：100%；
顶部：-1px；
高度：计算（100%+2px）；
宽度：30px；
溢出：隐藏；
}
.内：之后{
位置：绝对位置；
内容：''；
宽度：70px；
高度：70像素；
边界半径：50%；
背景：白色；
顶部：钙（50%-35px）；
左：-45px；
边界：1件坚固的海军；
}
/*只是为了演示*/
.矩形{
过渡：所有的1容易；
}
.矩形：悬停{
高度：400px；
}

什么是“我可以适应的非常具体的角度”？请简洁，人们很可能会写一些答案，而不是什么？！立即解释你的想法。@AlonEitan相关：@AlonEitan当我说一个我可以调整的非常具体的角度时，我的意思是，圆圈可以或多或少地在矩形内，所以弧的角度会或多或少地变大。嘿，太好了，你能加上这个作为答案吗，这样我就可以接受它了！：）