我将如何在两个图像之间制作一个微妙的曲线分隔线？

Question

因此：https://i.stack.imgur.com/UdHNE.png

CSS边框、剪辑路径等?

我试过以下方法：

div#box{
  width: 38px;
  height: 500px;
  border: 13px solid black;
  border-color: transparent black transparent transparent;
  border-radius: 0 100% 100% 0;
}

<div id="box"></div>

但它没有给我想要的结果（曲线太微妙）。

我也试过使用剪辑路径，但透明元素显然不会“切入”另一个元素，因为它是透明的。

body {
  background-color: lightblue;
}
.one {
  height: 500px;
  width: 38px;
  background-color: white;
  clip-path: ellipse(38px 50% at 0% 50%);
  position: absolute;
  right: 50%;
  top: 0;
}
.two {
  height: 500px;
  width: 38px;
  background-color: transparent;
  clip-path: ellipse(38px 50% at 0% 50%);
  position: absolute;
  right: calc(50% + 13px);
  top: 0;
}

<div class="one"></div>
<div class="two"></div>

如有任何帮助，我们将不胜感激。

Answer 1

你能试试这个吗，只玩第二个[180%]和第三个[-2%]值。

在这里我们创建了一个必需的 clip-path 而不是我们创建了另一个 div 这将为我们创建一个中间 space 和 aplly position: absolute ,overflow:hidden 到在红色 div 中创建相同的 clip-path 然后我们将中间 div 的 background-color 设置为与屏幕相同 background-color.

z-index 需要是 .one > .middle > .two

clip-path: ellipse(100% 180% at -2% 50% )

body {
  position: relative;
  min-height: 100vh;
  display: flex;
  place-items: center;
  background-color: bisque;
}


.one{
  position: relative;
  height: 500px;
  width: 500px;
  background-color: green;
  clip-path: ellipse(100% 180% at -2% 50% ) ;
  z-index: 3;
}

.middle{
  position: absolute;
  z-index: 2;
  height: 500px;
  width: 500px;
  clip-path: ellipse(100% 180% at -2% 50% ) ;
  left:25px;
  overflow: hidden;
  background-color: bisque;
}
.two{
  position: relative;
  z-index: 1;
  right:25px;
  height: 500px;
  width: 500px;
  background-color: red;
}

<div class="one"></div>
<div class="middle"></div>
<div class="two"></div>

我将如何在两个图像之间制作一个微妙的曲线分隔线？

How would I make a subtle curved line divider between two images?

html

css

css-shapes