Как создать CSS с формой волны

Question

На изображении ниже показано, что я пытаюсь создать:

У меня есть следующее решение, но оно должно быть более частым, например, увеличение частоты синусоидальной или косинусной волны

#wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}

#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 340px;
  height: 80px;
  background-color: white;
  right: -5px;
  top: 40px;
}

#wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 300px;
  height: 70px;
  background-color: #e0efe3;
  left: 0;
  top: 27px;
}

<div id="wave"></div>

_{Свободный перевод вопроса How can I create a wavy shape CSS? от участника @JoyFulCode.}

Answer 1

Вот идея с радиальным градиентом и переменными CSS, где вы можете легко управлять формой:

.wave {
  --c:red;   /* Цвет */
  --t:5px;   /* Толщина */
  --h:50px;  /* Высота (расстояние по вертикали между двумя кривыми) */
  --w:120px; /* Ширина  */
  --p:13px;  /* отрегулируйте это, чтобы исправить положение при изменении других значений*/
  background:
    radial-gradient(farthest-side at 50% calc(100% + var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
    radial-gradient(farthest-side at 50% calc(0%   - var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t)));
    
  background-size:var(--w) var(--h);
  background-position:calc(var(--w)/2) calc(var(--h)/2),0px calc(var(--h)/2);
  
  
  border:1px solid;
  margin:5px 0;
  display:inline-block;
  width:300px;
  height:150px;
}

<div class="wave"></div>

<div class="wave" style="--w:200px;--h:40px;--p:10px; --t:8px;--c:purple"></div>

<div class="wave" style="--w:80px ;--h:20px;--p:5px;  --t:3px;--c:blue;"></div>

<div class="wave" style="--w:100px;--h:30px;--p:14px;--t:10px;--c:green;"></div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

text-decoration-style + transform ⇒ волна

body {overflow: hidden;}

div {
  width: 300px; margin: 50px auto; font-size: 15px; color: transparent; text-align: center;
  text-decoration: underline; text-decoration-style: wavy; /*Первый велосипед*/
}

div:nth-child(1) {margin-top: -30px; text-decoration-color: red; transform: scale(1.5, 6);}

div:nth-child(2) {margin-top: 60px; text-decoration-color: darkmagenta; transform: scale(5, 2);}

div:nth-child(3) {margin-top: -50px; text-decoration-color: blue; transform: scale(4, 4);}

<div>волна волна волна</div>
<div>волна волна волна</div>
<div>волна волна волна</div>

БЛОГ НА HUSL

Как создать CSS с формой волны

Ответы (2 шт):