Как я могу преобразовать сложную форму в другую с помощью CSS или javascript?

Question

Например, у меня есть такая форма:

И я хотел бы изменить форму примерно в другую форму с помощью анимации:

Как я могу создать эти формы и после этого изменить форму с помощью HTML, CSS, javascript или jquery?

_{Свободный перевод вопроса How can I reshape a complex shape to another shape using css or javascript? от участника @Mohammad Amin Eskandari.}

Answer 1

Не совсем такая же форма, у нее отсутствует радиус во внутреннем углу, но это почти чистый HTML и CSS

document.getElementById("shape").addEventListener("click", evt => {
   evt.target.classList.toggle("open");
});

#shape {
  width: 600px;
  height: 60px;
  position: relative;
  transition: all 1s;
}

#shape::before {
  content: '';
  display: block;
  position: absolute;
  width: 400px;
  height: 60px;
  background-color: #eee;
  border-radius: 18px;
  transition: all 1s;
}

#shape::after {
  content: '';
  display: block;
  position: absolute;
  width: 400px;
  height: 60px;
  bottom: 0;
  background-color: #eee;
  border-radius: 18px;
  transition: all 1s;
}


#shape.open {
  height: 200px;
}

#shape.open::before {
  width: 300px;
  height: 200px;
}

#shape.open::after {
  width: 600px;
}

<div id="shape"></div>

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

Answer 2

Наверное подобный морфинг нужно делать с помощью других технологий, но попробуем решить вопрос только на HTML и CSS. Градиенты подойдут тут, как нельзя лучше, оставив нам один из псевдоэлементов для изображения стрелочки, например.

body { min-height: 100vh; background-image: radial-gradient(#aaf8, #002f); }

[type="checkbox"][id^="shape_"] { display: none; }

[type="checkbox"]+label {
  position: relative;
  margin-bottom: 10px;
  display: block;
  height: 60px; width: 400px;
  border-radius: 18px;
  background-image: linear-gradient(to top, #f5f5f5, #f5f5f5), linear-gradient(to top, #f5f5f5, #f5f5f5), radial-gradient(circle at top 19px left 19px, #f5f5f5 18px, #00f0 19px), linear-gradient(to top, #f5f5f5, #f5f5f5), linear-gradient(to top, #f5f5f5, #f5f5f5), radial-gradient(circle at right 19px bottom 19px, #f5f5f5 18px, #fa00 19px);
  background-size: 400px calc(100% - 18px), 382px 18px, 38px 38px, 100% 42px, calc(100% - 18px) 18px, 38px 38px;
  background-position: 0 100%, 0 0, 362px 0, 0 100%, 0 calc(100% - 42px), 100% calc(100% - 22px);
  background-repeat: no-repeat;
  box-shadow: 0 8px 5px -5px #0004;
  transition: all 1s;
}
[type="checkbox"]:checked+label {
  height: 200px; width: 600px;
  background-size: 300px calc(100% - 18px), 282px 18px, 100% 100%, 100% 42px, calc(100% - 18px) 18px, 100% 100%;
  background-position: 0 100%, 0 0, 262px 0, 0 100%, 0 calc(100% - 42px), 100% calc(100% - 22px);
}

[type="checkbox"]+label::before {
  content: "";
  position: absolute;
  top: 0; left: 382px; z-index: -1;
  display: block;
  height: 18px; width: 18px;
  background-image: radial-gradient( circle at right top, #f5f5f500 18px, #f5f5f5 19px);
  transition: all 1s;
}
[type="checkbox"]:checked+label::before {
  top: 122px; left: 300px;
}

[type="checkbox"]+label::after {
  content: "";
  position: absolute;
  top: 30px; left: 30px;
  display: block;
  height: 18px; width: 18px;
  transform-origin: 50% 50%;
  transform: translate(-50%, -75%) rotate(45deg);
  box-shadow: inset -3px -3px 0 #000;
  transition: all 1s;
}
[type="checkbox"]:checked+label::after {
  transform: translate(-75%, -50%) rotate(-45deg);
}

<input type="checkbox" id="shape_1"><label for="shape_1"></label>
<input type="checkbox" id="shape_2"><label for="shape_2"></label>

БЛОГ НА HUSL

Как я могу преобразовать сложную форму в другую с помощью CSS или javascript?

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