如何使用 css 和 html 在按钮上创建波浪？

Question

我正在尝试在按钮上创建波浪线，但我对此一无所知。我想要这样的按钮有没有办法创建这样的按钮，或任何其他方式来创建。任何建议，将不胜感激。

Answer 1

使用一些<svg>s 和<path>s 就可以了。

这是你的代码：

.container {

  width: 500px;

  height: 100px;

  background-color: rgb(0, 224, 150);

  border: none;

  border-radius: 5px;

}

.text {

  width: inherit;

  position: absolute;

  top: 50px;

  text-align: center;

  font-family: 'Roboto', sans-serif;

  text-transform: uppercase;

  color: white;

  font-size: 24px;

}

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">

<div class="container">

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">

    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,192L80,160C160,128,320,64,480,48C640,32,800,64,960,64C1120,64,1280,32,1360,16L1440,0L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>

    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,160L48,133.3C96,107,192,53,288,74.7C384,96,480,192,576,202.7C672,213,768,139,864,117.3C960,96,1056,128,1152,170.7C1248,213,1344,267,1392,293.3L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>

  <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,192L60,170.7C120,149,240,107,360,106.7C480,107,600,149,720,176C840,203,960,213,1080,202.7C1200,192,1320,160,1380,144L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>

    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,192L60,170.7C120,149,240,107,360,117.3C480,128,600,192,720,197.3C840,203,960,149,1080,117.3C1200,85,1320,75,1380,69.3L1440,64L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>

    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,0L60,21.3C120,43,240,85,360,112C480,139,600,149,720,133.3C840,117,960,75,1080,90.7C1200,107,1320,181,1380,218.7L1440,256L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>

    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,256L60,234.7C120,213,240,171,360,128C480,85,600,43,720,32C840,21,960,43,1080,69.3C1200,96,1320,128,1380,144L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>

    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,128L60,112C120,96,240,64,360,85.3C480,107,600,181,720,229.3C840,277,960,299,1080,304C1200,309,1320,299,1380,293.3L1440,288L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>

    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,64L60,106.7C120,149,240,235,360,234.7C480,235,600,149,720,117.3C840,85,960,107,1080,101.3C1200,96,1320,64,1380,48L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>

    <path fill-opacity="0" stroke-width="2" stroke="#fff"d="M0,224L40,224C80,224,160,224,240,208C320,192,400,160,480,138.7C560,117,640,107,720,101.3C800,96,880,96,960,128C1040,160,1120,224,1200,261.3C1280,299,1360,309,1400,314.7L1440,320L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>

  </svg>

  <div class="text">let's try</div>

</div>

现场演示：https://codepen.io/marchmello/pen/rNOWWXa? editors=1100