使用css如何绘制如下的图形

Question

使用css如何绘制上面的图形，主要是两端有一个圆角，如果只有中间有圆角，使用border-radius+transform就可以实现。

Answer 1

CSS:clip-path;
其可以引用一个 SVG 来描述剪切的路径，所以理论上可以实现任何 2D 图像。
复杂图形比较难写，可以借助 有些网站（因网络问题暂不可用） 来完成编辑，还有一些 SVG 编辑器也可以，比如 菜鸟SVG编辑器。