html - 元素周围的部分圆形边框

Question

我试图在没有图像的情况下实现这一点(黄色):

我找到的最详细的边界生成器是 this generator available in MDN .

虽然它不起作用。 还有其他方法吗？

Answer 1

是的，这可以通过在左下角组合插入 box-shadow 和 border-radius 来实现。

左下角的 border-radius 产生 flex 的底部，插入的 box-shadow 产生彩色区域。通过调整父容器上的 border-radius 可以增加/减少底部(内部和外部)的曲率。

.bordered {
  position: relative;
  width: 300px;
  height: 75px;
  padding-left: 25px;
  background: transparent;
  border-bottom-left-radius: 40px;
  box-shadow: inset 100px -15px 0px darkorange;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
}
.bottom-right {
  position: absolute;
  right: 10px;
  bottom: 2px;
  color: black;
  font-size: 11px;
}
/* just for demo */

body {
  background: black;
}

<div class="bordered"><span>Schematic</span>
  <span class="bottom-right">1234567890</span>
</div>