Question

我需要达到像this demo一样的效果。

但我在那里使用的代码太具体而且不太干净。正如你所看到的，我已经使用了很多元素，并且还使用了非常特定的角度计算进行了一些变换。

我有没有办法创造这种形状，保持响应但是更清洁？请注意，我不想只有半个圆圈，而是一个我可以适应的特定角度。我的意思是圆圈可能或多或少在矩形内，所以弧的角度或多或少都会很大。

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>

注意事项：

我不能使用z-index，这是我的第一个解决方案，但它会导致其他问题。
矩形的高度可以改变，所以我需要它才能响应，但即使容器的高度变大，圆的高度应该保持不变
如果可以选择，我可以使用SVG。

Answer 1

我通常建议将SVG用于此类形状，因为它更容易创建和维护弧形。使用SVG也意味着更好地控制半径，弧的起始和终止角等，但我不认为我们可以使形状的一部分响应（矩形），同时保持其他部分为静态（圆的高度）因此使用CSS可能更安全。

在CSS中，使用单个元素很难实现这一点，因为您已经指出z-index无法使用。其他方法（如使元素的宽度大于高度或使用比例）会产生椭圆弧，当高度或宽度发生变化时，还需要调整定位属性。

考虑到所有这些，使用一些元素和伪元素的下面方法可能是最好的选择。 .inner元素位于.rectangle右边框的顶部，其宽度恰好足以显示圆圈。在.inner元素内部，创建圆的伪元素放置为负左偏移，以便只有圆的一部分可见（由于溢出隐藏在.inner上）。输出响应。

＆＃13;

.rectangle {
  position: relative;
  background-color: white;
  width: 200px;
  height: 200px;
  border: solid 1px navy;
}
.inner {
  position: absolute;
  left: 100%;
  top: -1px;
  height: calc(100% + 2px);
  width: 30px;
  overflow: hidden;
}
.inner:after {
  position: absolute;
  content: '';
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: white;
  top: calc(50% - 35px);
  left: -45px;
  border: 1px solid navy;
}

/* Just for demo */

.rectangle {
  transition: all 1s ease;
}
.rectangle:hover {
  height: 400px;
}

＆＃13;

<div class='rectangle'>
  <div class="inner"></div>
</div>

＆＃13;

使用CSS限制形状的边框

1 个答案: