css3 - 怎样用纯css画出一个两边透明的S形宽区域

Question

如图，只想到了可以用两边填颜色遮住部分区域大概可以实现，如果要两侧显示如下层其他内容就想不到怎样实现了，求教

是不是一定要用canvas呢？

Answer 1

還是用canvas吧，css畫出來太慘不忍睹了

<canvas id="canvas" width="600px" height="350px"></canvas>

<script>   
var g=canvas.getContext("2d");   
g.beginPath();   
g.strokeStyle="#000";   
g.moveTo(0,200);   
g.bezierCurveTo(300,-100, 400,400, 550,0);   
g.lineTo(600,0);  
g.lineTo(600,100);  
g.bezierCurveTo(300,500, 300,-100, 0,350);   
g.lineTo(0,200);  
g.fillStyle="#000";
g.fill();
g.stroke();   
</script>

Answer 2

可以的，給你一個教學吧 CSS的隱藏繪畫功能和互動動畫技巧 講者：Wenting Zhang

Answer 3

雷雷 雷雷