如何在不使用图像的情况下在CSS中创建曲线

Question

我正在尝试创建一个包含多个曲线和弯曲边框的网站。

我正在使用vue，并试图使台式机和移动设备的外观相同，除非需要，否则无需图像。

Example of how screen should look

Curved lines examples

Answer 1

您可以使用SVG或带边框的边框来做。

这是一个带边框的演示。

HTML

<div class="curve"></div>

CSS

.curve {
  width: 500px;
  height: 100px;
  border: solid 5px #000; border-color: #000 transparent transparent transparent;   
  border-radius: 50%/100px 100px 0 0; 
}

MDN了解有关边框参数的更多信息