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

Question

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

当您更改 window 大小时，"capital I" 应适当调整大小。因此，向外的边框应该 "attached" 到垂直矩形。

这些是我能想到的实现方法：

阴影框
after/before元素

但是这些解决方案的外边框不会与垂直矩形相连。

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>

一旦您更改 window 大小，您就会看到外边框已关闭。（此外，使用选项 2 不可能创建超过 2 个外边界。）

有没有 CSS 的解决方案，即使您更改了 window 大小，您也只能创建与垂直矩形相连的外边框？

Answer 1

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

我在你的 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;
}

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

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

Answer 2

这不是假装答案，你已经有一个很好的答案了。

我只是想向您展示如何进一步推动您当前的设计

我已经调整了你的伪元素以自动调整到基本元素，并实现了 2 条曲线而不是 1 条

div {
    background-color: black;
    margin: 0 auto;
}
.bar {
    height: 10vh;
    width: 450px;
}
.one {
    height: 80vh;
    width: 300px;
    position: relative; /* new*/
}
.one:before {
  content: '';
  position: absolute;
  right: 100%;
  bottom: 0px;
  height: 100%;
  width: 50px;
  border-radius: 0px 50px 50px 0px;
  background-color: lightgreen;
  box-shadow: 22px 2px 0 22px black;
}

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

Answer 3

这个形状很容易用 inline svg with the path element 制作。
路径元素使用线命令制作水平线和垂直线（H 水平线和 V 垂直线）和 bezier curves 插入圆角（Q 具有 4 个坐标) :

svg{position:absolute;width:25%;height:auto;}

<svg viewbox="0 0 14 20">
  <path d="M0 0 H14 V2 H13 Q11.5 2 11.5 3.5 V16.5 Q11.5 18 13 18 H14 V20 H0 V18 H1 Q2.5 18 2.5 16.5 V3.5 Q2.5 2 1 2 H0z"/>
</svg>

注意：

形状根据 window 的宽度响应，因为 svg 的宽度以百分比设置。
可以通过贝塞尔曲线命令控制向外的半径
形状可以显示在非纯色背景（如图像或渐变）上，请参阅以下代码段

body{background:url('http://i.imgur.com/ug3M32a.jpg');background-size:cover;}
svg{position:absolute;width:25%;height:auto;}

<svg viewbox="0 0 14 20">
  <path d="M0 0 H14 V2 H13 Q11.5 2 11.5 3.5 V16.5 Q11.5 18 13 18 H14 V20 H0 V18 H1 Q2.5 18 2.5 16.5 V3.5 Q2.5 2 1 2 H0z"/>
</svg>

Answer 4

用两个伪元素减去形状既简单又干净，但这取决于背景颜色。另一种允许在不同背景上使用图形的非 SVG 方法是使用径向渐变，但如果没有额外的子元素，我无法获得漂亮的曲线。

body {
  background-color: #E1ECF4;
}
.one {
  position: relative;
  height: 15em;
  width: 5em;
  margin: 0 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #000;
}
.one > span {
  position: relative;
  display: inline-block;
  width: 9em;
  height: 1em;
  margin-left: -2em;
  background-color: inherit;
}
.one > span:before,
.one > span:after {
  content: "";
  position: absolute;
  width: 2em;
  height: 2em;
}
.one > span:first-child:before {
  top: 1em;
  left: 0;
  background: radial-gradient(circle farthest-corner at 0 100%, transparent 2em, #000 2em)
}
.one > span:first-child:after {
  top: 1em;
  right: 0;
  background: radial-gradient(circle farthest-corner at 100% 100%, transparent 2em, #000 2em)
}
.one > span:first-child + span:before {
  bottom: 1em;
  left: 0;
  background: radial-gradient(circle farthest-corner at 0 0, transparent 2em, #000 2em)
}
.one > span:first-child + span:after {
  bottom: 1em;
  right: 0;
  background: radial-gradient(circle farthest-corner at 100% 0, transparent 2em, #000 2em)
}

<i class="one">
  <span></span>
  <span></span>
</i>

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

Creating multiple outward border radi with CSS

html

css

responsive-design

css-shapes