html - CSS - 如何制作带有 flex 边缘的倒置边框底部？

Question

我到处寻找，但找不到这个确切的例子:

我设法做到了这一点，但正如你所看到的，它没有倒转也没有 flex :

.outer {
  overflow: hidden;
}
.inner {
  border-bottom: 1px solid #888;

}
.inner i {
  width: 40px;
  height: 40px;
  border: 1px solid #888;
  border-radius: 150%;
  background-color: #fff;
}
.inner .top {
  margin-top: -20px;
}
.inner .bottom {
  margin-top: -20px;
  margin-bottom: -22px;
}
.inner .left {
  float: left;
  margin-left: -20px;
}
.inner .right {
  float: right;
  margin-right: -20px;
}
.content {
  min-height: 10px;
}

<div class="outer">
  <div class="inner">
    <div class="content"></div>
    <i class="bottom right"></i>
    <i class="bottom left"></i>
  </div>
</div>

这可能吗？我希望它尽可能短(高度)，就像图像一样 - 而且我不想使用图像或 SVG(我尝试过，它看起来很奇怪)我想使用动态宽度。

Answer 1

您需要使用border-top而不是 border-bottom

.border-curve {
  width: 20em;
  height: 10em;
  background: transparent;
  border-top: 1px solid hsl(180deg 100% 52%);
  border-radius: 0.35em;
}

body {
  background: gray;
}

<div class="border-curve"></div>