html - 使用 CSS 创建多个向外的边框半径

Question

我想围绕一个矩形创建 4 个向外的边框半径。我想在红色圆圈中创建边框(但不仅是一个，而且在矩形周围总计 4，所以它看起来像一个“大写 I”)

当您更改窗口大小时，“capital I”应该适本地调整大小。因此，外边框应该“附加”到垂直矩形。

这些是我能想到的如何实现它的选项:

1. 阴影框
2. 元素之后/之前

但是这些解决方案的外边界不会一直附着在垂直矩形上。

这里是example for option 2 :

div {
  background-color: black;
  margin: 0 auto;
}
.one {
  height: 80vh;
  width: 300px;
}
.bar {
  height: 10vh;
  width: 450px;
}
.one:before {
  content: '';
  position: absolute;
  left: 115px;
  height: 50px;
  width: 50px;
  border-bottom-right-radius: 50px 50px;
  border-bottom: 1px solid #000;
  border-right: solid 1px #000;
  top: 81.3vh;
  background-color: white;
  box-shadow: 22px 22px 0 22px black;
}

<div class="bar top"></div>
<div class="one"></div>
<div class="bar bottom"></div>

更改窗口大小后，您会看到外边框已关闭。 (此外，使用选项 2 不可能创建超过 2 个的外边界。)

有没有仅使用 CSS 的解决方案，即使您更改了窗口大小，您也可以创建与垂直矩形相连的外边框？

Answer 1

我的第一个建议是只使用单个元素来表示字母，而不是将其分为三个部分(顶部栏、底部栏、中间栏)。从几何上讲，这使问题变得简单得多 - 无需在形状中添加四个“负”圆 Angular ，只需从中减去两个部分圆 Angular 的矩形即可。

我整理了您的 CSS，删除了栏元素并完成了 .one:before 和 .one:after 的样式 block 。我还删除了 1px 边框 - 如果需要，您可以重新添加这些边框，但需要进行一些调整(在某些地方可能需要 calc())。否则，即使您不知道，您也非常接近解决方案:

div {
  background-color: black;
  margin: 0 auto 0 auto;
}
.one {
  height: 100vh;
  width: 450px;
  ;
  position: relative;
}
.one:before,
.one:after {
  content: '';
  position: absolute;
  height: 80vh;
  width: 75px;
  top: 10vh;
  background-color: white;
}
.one:before {
  left: 0;
  border-top-right-radius: 50px 50px;
  border-bottom-right-radius: 50px 50px;
}
.one:after {
  right: 0;
  border-top-left-radius: 50px 50px;
  border-bottom-left-radius: 50px 50px;
}

<div class="one"></div>

希望对您有所帮助!如果您有任何问题，请告诉我。