如何用HTML、CSS制作复杂图形？仅用单个Div实现指定图形（非SVG）

Got it, let's break this down properly! First, I'll walk you through replicating that specific SVG shape using only a single div and CSS, then cover the broader approach to building complex graphics with HTML/CSS.

First, let's dissect the SVG you provided: it's a custom polygonal path with a black 1px stroke, khaki fill, and a slight horizontal transform. Here's how to translate that to CSS:

Step 1: Parse the SVG Path & Transform #

The SVG uses transform="matrix(1.05374 0 0 1 -4.94393 0)" — this scales the x-axis by ~1.05374 and shifts all x-coordinates left by 4.94393. I applied this transform to every point in the original path to get the final coordinates we need for CSS.

Step 2: Build the CSS Shape #

We'll use clip-path: polygon() to define the exact outline, set the background to match the SVG's fill, and use outline for the stroke (since border would get clipped by the clip-path, while outline draws outside the shape just like SVG's stroke).

Here's the code:

<div class="svg-clone"></div>

.svg-clone {
  /* Set dimensions to cover the shape's full bounds */
  width: 575px;
  height: 310px;
  /* Match SVG fill */
  background-color: khaki;
  /* Match SVG stroke (outline avoids clipping) */
  outline: 1px solid black;
  /* Define the shape using transformed coordinates */
  clip-path: polygon(
    143.5px 308px,
    144.6px 158px,
    242.6px 157px,
    242.5px 106px,
    300.5px 105px,
    300.4px 54px,
    393.3px 54px,
    395.0px 182px,
    573.4px 182px,
    573.4px 309px,
    143.5px 308px /* Close the path */
  );
  /* Optional: Add spacing for visibility */
  margin: 2rem;
}

Quick Notes: #

• The coordinates in clip-path are rounded slightly for readability but closely match the transformed SVG path.
• outline is key here — it mimics SVG's stroke behavior by drawing outside the clipped shape, whereas border would be cut off by the clip-path.

For more elaborate graphics beyond single shapes, these are the go-to techniques:

• Pseudo-Elements: Use ::before and ::after to add up to two extra shapes to a single div, perfect for composite icons or simple illustrations.
• Gradients & Box Shadows: Combine linear-gradient, radial-gradient, and box-shadow (with multiple layers) to create textures, curves, and layered effects without extra elements.
• Clip-Path & Masking: clip-path handles hard-edged custom shapes, while mask-image lets you create translucent or gradient-based masks for softer effects.
• Nested Elements: For highly complex graphics, use nested divs (positioned with Grid or Flexbox) to assemble smaller shapes into a larger whole.

For example, you could build a detailed logo using a single div with three gradients and a handful of box shadows, or combine five clipped divs to create a small scene.

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