使用CSS创建多个向外边界辐射

Question

我想在矩形周围创建4个向外边界辐射。我想在红色圆圈中创建边框（但不仅是一个，而是围绕矩形的总和4，所以它看起来像一个＆＃34;资本I＆＃34;）

那是＆＃34;资本I＆＃34;更改窗口大小时应适当调整大小。因此，外部边界应该是“附加的”＃34;到垂直的矩形。

这些是我能想到如何实现它的选择：

1. 影子框
2. 元素之后

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

这是example for option 2：

＆＃13;
＆＃13;
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;
}
＆＃13;
<div class="bar top"></div>
<div class="one"></div>
<div class="bar bottom"></div>
＆＃13;
＆＃13;
＆＃13;

更改窗口大小后，您会看到外边框已关闭。 （此外，使用选项2无法创建超过2个向外边界。）

是否有CSS解决方案，即使您更改窗口大小，也可以创建保持附加到垂直矩形的向外边框？

Answer 1

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

我在你的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的path element非常容易制作这种形状 path元素使用线命令来生成水平和垂直线（H表示水平线，V表示垂直线）和bezier curves表示插入圆角（Q 4条坐标）：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请注意：

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

＆＃13;

＆＃13;

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)
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;