html css怎么实现这种弧度效果

img
用 svg 或者canvas 还是用几个div 图中是使用 clip-path 裁剪 的 想知道有没有好一点的方法

可以用一些CSS实现比较接近的效果，但是需要图中效果，可能需要PS做一些背景图片会好一些：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  
  <title>Document</title>
  <style>
  
      #m{
          position:relative;
        width:500px;
      }

    #sp1{
        height:60px;
        width:300px;
        background-color:black;
        border-top-right-radius: 60px; 
    }
    #sp2{
        position:absolute;
        right:5px;
        bottom:0px;
        height:25px;
        width:200px;
        background-color:black;
    }
  </style>
 </head>
 <body>
  <div id="m">
    <div id="sp1">111</div>
    <div id="sp2">222</div>
  </div>
 </body>
</html>

img

用canvas:

<body>
    <canvas id="myCanvas" width="600" height="600">您的浏览器暂不支持canvas;</canvas>
</body>
</html>
<script>
    var $myCanvas = document.getElementById("myCanvas");
    var ctx = $myCanvas.getContext('2d');
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,100);
    ctx.lineTo(200,100);
    ctx.bezierCurveTo(280,100,230,150,300,150);
    ctx.lineTo(600,150);
    ctx.lineTo(600,0);
    ctx.lineTo(0,0);
    ctx.fillStyle="#4B2CF5";
    ctx.fill();
    ctx.stroke();
</script>

img

最笨的方法下面做个黑色的div右上角圆角盖住蓝色的模块就好了啊，

如果用纯css，html的话，实现效果不是很好的，只是接近而已，总共3个div，外围一个div，包含2个div，左边的div右上角设置为圆角即可实现接近的效果

border-radio圆弧效果加固定定位或者粘性定位

svg。

用图 定位

用ps画一个这种图片，然后父元素背景颜色设置为蓝色，子元素背景图片设置为这个图片并调整大小，再用上定位调整

<div class="content">
    <div class="tupian">

    </div>
</div>

<style>
    .content{
        border-color: blue;
        position: relative;
    }
    .tupian{
        background-image: url();
        position: absolute;
        bottom: 0;
    }
</style>