Нарисуйте кривую с помощью css

Question

Нарисуйте кривую с помощью css

Я хочу создать анимацию с css, которая имитирует движение волны.

Для этого мне нужно изменить линию-или div-на кривую...

Правила CSS, с которыми я знаком, делают весь div полукруглым или изменяют границу элемента.

Например:
border-radius, или perspective, или border-top-radius...

Это изображение покажет вам, чего я хочу.:
кривая

Есть ли у вас опыт в этом? или это возможно?

Заранее благодарю...

875 2

css

2 ответов:

Comments

Ничего не найдено.

Elad Shechter · Accepted Answer · 2018-06-18 23:56:08

Вы можете использовать асимметричную границу для создания кривых с помощью CSS.

border-radius: 50%/100px 100px 0 0;

ПОСМОТРЕТЬ ДЕМО
.box {
  width: 500px; 
  height: 100px;  
  border: solid 5px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
}
<div class="box"></div>

Satish Kumar Verma · Accepted Answer · 2018-07-04 10:23:31

@Navaneeth и @Antfish, нет необходимости преобразовывать вы можете сделать так же, потому что в приведенном выше решении видна только верхняя граница, поэтому для внутренней кривой вы можете использовать нижнюю границу.
.box {
  width: 500px;
  height: 100px;
  border: solid 5px #000;
  border-color: transparent transparent #000 transparent;
  border-radius: 0 0 240px 50%/60px;
}
<div class="box"></div>