I've been looking everywhere and couldn't find this exact example:
我设法做到了这一点，但正如你所看到的，它不是倒置的，也不是弯曲的:
.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(我试过了，它看起来很奇怪)，我想使用动态宽度.