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

问题描述

问 题

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

是不是一定要用canvas呢？

解决方案

还是用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>

这篇关于css3 - 怎样用纯css画出一个两边透明的S形宽区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！