如何使用CSS裁剪背景图片的左下角和右下角

Hey there! I see you're trying to recreate a specific background shape and ran into snags with clip-path—let’s walk through some reliable alternative methods to get that perfect look you’re aiming for.

1. Pseudo-Element Overlay for Controlled Shaping #

Instead of clipping the entire hero section, use a ::before or ::after pseudo-element to add your shape independently. This gives you more flexibility to adjust the shape without disrupting your background image or content layout.

Updated Code Example: #

.hero-section {
  height: 740px;
  position: relative; /* Required for pseudo-element positioning */
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://i.postimg.cc/RZxY1MMZ/hero-image.jpg") no-repeat top;
  background-size: cover;
  width: 100%;
  z-index: 5;
}

/* Add a bottom shape using pseudo-element */
.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160px; /* Adjust height to match your shape */
  background: #ffffff; /* Use your page background color here */
  clip-path: polygon(0% 0, 100% 0%, 50% 100%, 0 100%); /* Tweak polygon points for your desired shape */
  z-index: -1; /* Keep it behind your hero content */
}

.hero-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
}

.hero-heading h1 {
  color: #fff;
  text-align: center;
  font-size: 50px;
  font-family: "Playfair Display", serif;
  font-weight: bold;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.hero-heading h1 svg {
  position: absolute;
  bottom: -10px;
  left: -35px;
  z-index: -1;
}

2. Inline SVG for Complex Curved Shapes #

If your desired shape has intricate curves or details, inline SVG is a rock-solid choice. You can export your exact shape from design tools (like Figma or Illustrator) and embed it directly into your HTML, then position it to overlay the bottom of your hero section.

Example with Inline SVG: #

<section class="hero-section">
  <div class="hero-heading">
    <h1>
      H1 Impact Summary
      <svg xmlns="http://www.w3.org/2000/svg" width="524.381" height="36.652" viewBox="0 0 524.381 36.652">
        <path id="Path_2986" data-name="Path 2986" d="M555.839,170.15c-10.4-2.281-89.638-2.05-95.272-2.8-4.522-.929,5.543-15.028,10.269-17.026,1.67-.714,3.457-.787,7.446-.338,6.3.816,89.608,1.647,89.608,1.647,1.02.472,4.577-.94,5.089-.383,1.686,1.3,136.62,3.018,148.109,3.236,6.971.133,1.3.855,9.566.715,17.59-.242,55.523,1.385,68.882.933a151.426,151.426,0,0,1,23.062.438c10.3.728,65.643,1.459,72.139.622,1.591-.236,2.752-.107,2.7.212-.008.066,38.866,1.286,39,1.539a3.42,3.42,0,0,0,2.536.314c2.086-.277,43.747-.427,44.238.52,1.554,2.7-6.188,13.8-11.5,16.416-5.447,2.8-31.9-1.172-53.966.042l-101.235-2.4-21.9.544c-2.3-1.015-12.31,1.137-17.769-.71-2.319-.738-19.526-1.278-23.47-.659-3.411.469-91.333-3.165-100.724-1.484C636.84,169.521,571.064,170.148,555.839,170.15Z" transform="translate(-461.969 -132.524) rotate(-1)" fill="#00a3e1" />
      </svg>
    </h1>
  </div>
  <!-- Inline SVG for custom bottom shape -->
  <svg class="hero-bottom-shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120">
    <path fill="#ffffff" fill-opacity="1" d="M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,90.7C1120,85,1280,43,1360,21.3L1440,0L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
  </svg>
</section>

Add this CSS to position the SVG:

.hero-bottom-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

3. CSS Masking for Subtle Shape Effects #

CSS mask-image lets you hide parts of your hero section using a gradient or SVG mask. This is great if you want the shape to blend seamlessly with the background below.

Example with Gradient Mask: #

.hero-section {
  height: 740px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://i.postimg.cc/RZxY1MMZ/hero-image.jpg") no-repeat top;
  background-size: cover;
  width: 100%;
  z-index: 5;
  /* Create a gradient mask to fade the bottom into a shape */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  /* For complex shapes, replace the gradient with an SVG mask: */
  /* -webkit-mask-image: url('your-custom-shape.svg');
  mask-image: url('your-custom-shape.svg'); */
}

4. Pre-Edited Background Image #

If you don’t need the shape to be responsive or dynamic, you can edit your hero image directly in a tool like Photoshop or Canva. Add the shape to the bottom of the image (matching your page background color) and use that edited image as your background—no CSS tricks required!

Each method has its sweet spot: pseudo-elements are perfect for simple polygons, SVGs handle complex curves, masking offers subtle blending, and pre-edited images are great for static designs. Tweak the values and shapes to match your exact vision!

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