对应的效果是：

主要思想应该还是用 border-radius。但 border-radius 只能给角设半径，不能给角的两条边分别设半径。我们所需要的是给角的两边分别设不一样的半径。
这个时候画椭圆的方法给了我启发。利用百分比做半径，我们就能给每个角的两边设不一样的半径了。
但题主要的又不是椭圆，所以这个时候就得结合用 calc 了。
我做了一个 demo ，题主在这个基础上继续调整一下 border-radius 应该就能实现想要的效果。

如果在里面放图片或图表，就会是这样：

css利用border画椭圆 应该是可以实现的

代码如下：

border-radius有一个比较少人知道的特性，它可以单独制定水平半径和垂直半径，语法是用/来分隔。关于这一点，推荐看下MDN上的解释。

题主的这个图形并不算完全的不规则图形，而是一个稍特别的圆角矩形，因此可以灵活使用border-radius与overflow: hidden。