CSS或svg实现弧形布局？

Question

CSS能否实现将水平布局变成弧形布局，如下：

试过jquery.arctext，可以将文字变成弧形，但是dom却无能为力。

如果使用svg来定位的话，可以实现。但是需要计算每一个的位置，这简直没法维护。

是否存在更快捷的方式实现该功能呢？

Answer 1

通过svg，手动写个布局算法，先用规则算出节点坐标，根据两点坐标绘制贝塞尔曲线

Answer 2

可以尝试用canvas画,用贝塞尔曲线

Answer 3

CSS应该也行

<style>
  .box {
    width: 300px;
    height: 50px;
    border: 1px solid transparent;
    border-top-color: #000;
    border-right-color: #000;
    border-radius: 0 100% 0 0 / 0 100% 0 0;
  }
</style>
<div class="box"></div>