Php 弯曲<；人力资源>；S形

我一直在到处搜索，如何制作一个html/css响应的S形虚线，就像这样

到目前为止，它一直是我存在的基础。 我试图不惜一切代价避免使用SVG，尽管我也搜索了如何在SVG中使用SVG。 有人能帮我吗？

hr.style-seven{
高度：150像素；
边框样式：实心；
边框颜色：黑色；
边框宽度：1px0；
边界半径：130px 0px 0px 0px；
边框顶部：1px虚线#8c8c；
右边距：130像素；
}
hr.风格七：在{
显示：块；
内容：“；
高度：150像素；
边缘顶部：-151px；
边框样式：实心；
边框颜色：黑色；
边框宽度：0 1px 0；
边界半径：0px 0px 130px 0px；
左边距：130像素；
右边距：-130px；
边框底部：1px虚线#8c8c；
} 
.box{高度：500px；页边距顶部：200px；}

SVG将是目前为止最简单的解决方案。是的，但我如何确定正确的坐标以及如何使其响应？SVG中的S意味着可伸缩性。SVG具有天生的响应能力：D@wydtron，我已经实现了CSS解决方案，看看吧！加上创意教育：D