带有边框半径的元素内部带有边框半径的元素不一致

Question

我的布局很可能无法更改。我需要在另一个具有边框半径的元素内的元素上使用边框半径。 目的是填补空白。问题是子元素的角溢出了，但我不能在这个项目中使用 overlow:hidden，这就是我尝试使用 border-radius.

的原因

这里是展示我的尝试的片段：https://jsfiddle.net/5fgtL4so/5/

问题是 30px 的内边框半径与外边框半径的曲线不同。我不想对此进行硬编码，因为它必须具有响应性。正如您在代码片段中看到的那样，我也尝试调整宽度和边距，但这似乎不是正确的方法，因为我仍然有很小的误差。

知道如何解决这个问题吗？

.parent {
  border: 3px solid tomato;
  background-color: white;
  height: 200px;
  border-radius: 30px;
}

.child {
  border: 3px solid tomato;
  padding:10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
  /* bellow solution is not perfect. There is still tiny white space around innter corners, it's a bit more visible on my project */
  /*
  margin-left: -3px;
  width: calc(100% + 6px);
  */
}

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 1

您可以使用 inset box-shadow 而不是 border。

.parent {
  /*border: 3px solid tomato;*/
  background-color: white;
  height: 200px;
  border-radius: 30px;
  box-shadow: inset 0px 0px 0 3px tomato;
}

.child {
  border: 3px solid tomato;
  padding: 10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
  </div>
</div>

此外，如果您还添加 margin-top: -3px，您的解决方案也有效。

.parent {
  border: 3px solid tomato;
  background-color: white;
  height: 200px;
  border-radius: 30px;
}

.child {
  border: 3px solid tomato;
  padding: 10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
  margin-left: -3px;
  margin-top: -3px;
  width: calc(100% + 6px);
}

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 2

虽然这个问题有点晚了，但通过设置父项的 overflow: hidden 并从子项中完全删除半径，您可以实现您所需要的。

.parent {
  border: 3px solid tomato;
  background-color: white;
  height: 200px;
  border-radius: 30px;
  overflow: hidden;
}

.child {
  border: 3px solid tomato;
  padding:10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
  </div>
</div>

带有边框半径的元素内部带有边框半径的元素不一致

Element with border-radius inside element with border-radius is not consistent

html

css

border

border-radius