如何使用CSS Border、Clip Path等实现两张图片间的细微曲线分隔线？

I get it—you're aiming for that tight, subtle curved line to split two images, just like the example you referenced. Your initial two approaches were on the right track, but the parameters and implementation details weren't quite tuned to get that perfect subtle curve. Let's fix this step by step.

First, Let's Break Down Why Your Previous Attempts Didn't Work #

• Issue with Solution 1: The curve was too flat because using border-radius: 0 100% 100% 0 creates a very gentle arc, and the ratio of border width to element size didn't align with a "subtle" curve.
• Issue with Solution 2: Transparent elements can't create a "cutting" effect because clip-path only modifies the element itself—transparent backgrounds don't affect the content underneath. We need to flip the approach and use clip-path to crop the background/image areas instead.

Solution 1: Tweak Border + Border-Radius for a Tight Curve #

This is an optimized version of your first idea, adjusting values to make the curve compact and subtle:

/* Container for the two images and divider */
.image-wrapper {
  display: flex;
  height: 500px;
  width: 100%;
}

/* Simulate left/right images (replace with actual img tags) */
.left-image, .right-image {
  flex: 1;
  background-color: #f0f0f0;
}

/* The curved divider */
.curved-divider {
  width: 18px;
  height: 100%;
  /* Thin right border for the curve line */
  border-right: 2px solid #000;
  /* Adjust border-radius for a tighter curve */
  border-radius: 0 10px 10px 0;
}

<div class="image-wrapper">
  <div class="left-image"></div>
  <div class="curved-divider"></div>
  <div class="right-image"></div>
</div>

How it works: #

By swapping 100% border-radius for a fixed pixel value (like 10px) and reducing the border width, you get a much tighter, subtle curve. Adjust the width of the divider and border-radius values to make the curve as narrow or pronounced as you need.

Solution 2: Clip-Path for Seamless "Cut" Effect #

This method creates a true seamless curve between two images/backgrounds by cropping the edges of each side, no extra divider element needed:

.image-wrapper {
  display: flex;
  height: 500px;
  width: 100%;
  overflow: hidden;
}

.left-image {
  flex: 1;
  background-color: #e6f7ff; /* Replace with your left image */
  /* Crop the right edge into a curve */
  clip-path: polygon(0 0, calc(100% - 8px) 0, calc(100% - 8px) 15%, 100% 50%, calc(100% - 8px) 85%, calc(100% - 8px) 100%, 0 100%);
}

.right-image {
  flex: 1;
  background-color: #fff2e6; /* Replace with your right image */
  /* Crop the left edge to mirror the curve */
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 8px 85%, 0 50%, 8px 15%);
}

<div class="image-wrapper">
  <div class="left-image"></div>
  <div class="right-image"></div>
</div>

How it works: #

The clip-path: polygon() defines a custom shape for each image edge. Adjust the 8px value to control how wide the curve is (smaller = more subtle) and tweak the 15%/85% values to change the curve's steepness. This creates a clean, integrated curve where the two images meet.

Solution 3: SVG Background for Full Customization #

If you need precise control over the curve's shape, use an SVG as a background. This lets you define exactly the arc you want:

.curved-divider {
  width: 20px;
  height: 500px;
  /* Inline SVG with a custom quadratic bezier curve */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 500'%3E%3Cpath d='M0,0 L20,15 L20,485 L0,500 Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M20,15 Q10,250 20,485' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

How it works: #

The SVG uses a quadratic bezier curve (Q command) where 10,250 is the control point. Adjust this point (and the 15/485 values) to tweak the curve's shape until it matches your example perfectly.

Pick the solution that fits your use case: Solution 1 is quick and simple, Solution 2 is great for seamless image integration, and Solution 3 gives you full creative control.

内容的提问来源于stack exchange，提问作者4oh3