Question

我一直在用Figma设计标题，我希望它可以在我的网站上发布。您能帮我了解我必须在此设计中应用哪些CSS：

这并不一定是完美的，只要我开始了解如何控制曲线，便可以花时间调整自己的喜好。我可以创建一条两边相等的曲线，但是我还没有弄清楚如何进行上面的设计。

预先感谢

亲切的问候， Mathias

Answer 1

您可以创建具有线性渐变的svg路径。

https://getwaves.io/对于获取wave svg非常有用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <defs>
            <linearGradient id="myGradient" gradientTransform="rotate(45)">
                <stop offset="5%" stop-color="orange" />
                <stop offset="75%" stop-color="purple" />
                <stop offset="95%" stop-color="blue" />
            </linearGradient>
        </defs>
        <path fill="url('#myGradient')" fill-opacity="1"
            d="M0,128L120,133.3C240,139,480,149,720,138.7C960,128,1200,96,1320,80L1440,64L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z">
        </path>
    </svg>
</body>

</html>

标头CSS：如何完成此设计

1 个答案: