关于div上套不规则边框的问题

Question

如图这样的设计，需要在echarts上套一个边框，css不是很容易实现（主要弧边不好处理），现在边框用图片代替，但是怎么让echarts嵌在图里呢。echarts是长方形，卡住了，没什么思路了，求各位大牛支招

Answer 1

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

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

代码如下：

.sp-rect{
    width: 200px;
    height: 108px;
    border-radius: 15px / 50%; /* 表示4个角的圆角，水平半径均为15px，垂直半径均为108 * 50% = 54px */
    background: #f48fb1;
    overflow: hidden;
}

<div class="sp-rect">
   // ...
</div>

对应的效果是：

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

Answer 2

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

Answer 3

别的答案里提 border-radius 可以分别设水平和垂直半径，所以就不要用以下hack方法了。

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

div {
    height: 300px;
    width: 600px;
    overflow: hidden;
    border: 1px solid red;
    border-radius: calc(220px - 32%);
}

Answer 4

遇到类似的问题找到这里，border-raduis虽然可以解决，但是效果不完美，而且遇到其他不规则的外边框就不能解决了。
可以用clip-path来自定义div的裁剪形状。参考链接：
https://developer.mozilla.org...