Сделать волновой эффект для изображений

Question

* {
  box-sizing: border-box;
}

.container{
  display:flex;
  flex-direction: column;
  width: 600px;
  height: 600px;
}

.image{
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url('https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg')
}

.box-1, .box-2{
  display:flex;
  flex-direction: row;
  flex-basis: 50%;
}

.image, .content{
  border: 1px solid black;
  flex-basis: 50%;
}

.content{
  padding: 30px;
}

<div class="container">
  <div class="box-1"><div class="image"></div>
  <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt,</div></div>
  <div class="box-2"><div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.</div>
  <div class="image"></div></div>
</div>

Из приведенного выше результата я хочу создать что-то вроде этого:

Итак, идея состоит в том, чтобы создать закругленные углы для обоих изображений, но я хочу соединить столбцы, поэтому закругленные углы должны быть соединены там, где я показал синюю линию. Есть ли у кого-нибудь идеи, как это решить?

_{Свободный перевод вопроса Make wave effect for images от участника @Asking.}

Answer 1

Рассмотрим clip-path, а затем просто увеличим гибкую основу изображения:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 600px;
}

.image {
  background-size: 100% 100%;
  background-image: url('https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg')
}

.box-1,
.box-2,
.content{
  display: flex;
  flex-basis: 50%;
}

.content {
  padding: 30px;
}

/* below the added code */
.image {
  flex-basis:70%;
}
.box-1 .image {
 clip-path: circle(farthest-side at 20% 50%);
}
.box-2 .image {
 clip-path: circle(farthest-side at 80% 50%);
}

<div class="container">
  <div class="box-1">
    <div class="image"></div>
    <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt,</div>
  </div>
  <div class="box-2">
    <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.</div>
    <div class="image"></div>
  </div>
</div>

Другая идея для адаптивной версии:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
}

.image {
  background-size: 100% 100%;
  background-image: url('https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg')
}

.box-1,
.box-2{
  display: flex;
  flex-basis: 50%;
}

.content {
  padding: 30px;
  flex:1;
}

/* below the added code */
.image {
  --d:600px;
  flex-basis:calc(50% + 20px);
}
.box-1 .image {
 clip-path: circle(var(--d) at calc(100% - var(--d)) 50%);
}
.box-2 .image {
 clip-path: circle(var(--d) at calc(var(--d)) 50%);
}

<div class="container">
  <div class="box-1">
    <div class="image"></div>
    <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt,</div>
  </div>
  <div class="box-2">
    <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.</div>
    <div class="image"></div>
  </div>
</div>

Версия с использованием CSS маски:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
}

.image {
  background-size: 100% 100%;
  background-image: url('https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg')
}

.box-1,
.box-2{
  display: flex;
  flex-basis: 50%;
}

.content {
  padding: 30px;
  flex:1;
}

/* below the added code */
.image {
  --d:300px; /* adjust here to control the curve  */
  flex-basis:calc(50% + 43px); /* and here to rectify the gap */
}
.box-1 .image {
 -webkit-mask:
    linear-gradient(#fff,#fff) left/calc(100% - var(--d)) 100%,
    radial-gradient(circle var(--d) at calc(100% - var(--d)) 50%,#fff 99%,transparent);
 -webkit-mask-repeat:no-repeat;
}
.box-2 .image {
 -webkit-mask:
    linear-gradient(#fff,#fff) right/calc(100% - var(--d)) 100%,
    radial-gradient(circle var(--d) at var(--d) 50%,#fff 99%,transparent);
 -webkit-mask-repeat:no-repeat;
}

<div class="container">
  <div class="box-1">
    <div class="image"></div>
    <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt,</div>
  </div>
  <div class="box-2">
    <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.</div>
    <div class="image"></div>
  </div>
</div>

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

БЛОГ НА HUSL

Сделать волновой эффект для изображений

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