使用CSS创建多个向外边界半径

thadeuszlay 发表于 Dev

Thadeuszlay

我想围绕一个矩形创建4个向外的边界半径。我想在红色圆圈中创建边框（但不仅要边框，而且要在矩形周围加4，所以它看起来像“大写字母I”）

当您更改窗口大小时，“大写字母I”的大小应适当调整。因此，向外边界应“附加”到垂直矩形上。

这些是我可以想到的选择：

暗箱
元素之后/之前

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

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是否有解决方案，仅在您可以创建向外边界的情况下，即使更改窗口大小，该边界仍保持附着在垂直矩形上？

Serlite

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

我抛去你的CSS，消除杆元件和完成风格块.one:before和.one:after。我还删除了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;
}