我一直在到處尋找，找不到這個確切的例子：
我設法做到了，但正如你所看到的，它不是倒置的，也不是彎曲的：
.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（我試過了，它看起來很奇怪）我想用動態寬度來使用它。
uj5u.com熱心網友回復：
您需要使用 ofborder-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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/477744.html
上一篇：從頂部和底部禁用Appbar填充