如何实现示例中的非水平斜向Div？求实现方案

Hey there! I totally get how frustrating it is when you can’t find the right tutorial for a specific layout—especially when you’ve got a project deadline breathing down your neck. Let’s break down how to create those slanted div sections you need, since standard horizontal slant guides aren’t cutting it.

1. Basic Slanted Div (Single Section) #

If you need a single div with slanted edges (without tilting the inner content), the transform: skew() trick is your go-to. The key is to skew the outer container, then reverse the skew on the inner content to keep text/elements straight:

<div class="slanted-block">
  <div class="slanted-block__content">
    <h2>Slanted Edge Section</h2>
    <p>No tilted text here—just clean slanted borders!</p>
  </div>
</div>

.slanted-block {
  background: #2563eb;
  padding: 4rem 0;
  /* Adjust the skew angle to match your design */
  transform: skewY(-3deg);
}

.slanted-block__content {
  /* Reverse the skew to fix content alignment */
  transform: skewY(3deg);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  color: white;
}

2. Connected Slanted Sections (Continuous Layout) #

For the "continuous slant" effect you mentioned (where one section’s slanted edge connects perfectly to the next), you have two reliable options:

Method A: Skew with Offset Margins #

This works great for simple, uniform slants across multiple sections:

<section class="linked-slant linked-slant--top">
  <div class="linked-slant__content">
    <h2>First Slanted Section</h2>
    <p>Bottom edge slants down to the right</p>
  </div>
</section>
<section class="linked-slant linked-slant--bottom">
  <div class="linked-slant__content">
    <h2>Second Slanted Section</h2>
    <p>Top edge matches the first section’s slant</p>
  </div>
</section>

.linked-slant {
  padding: 4rem 0;
  position: relative;
}

.linked-slant--top {
  background: #2563eb;
  transform: skewY(-3deg);
  /* Negative margin overlaps the next section to hide gaps */
  margin-bottom: -4rem;
}

.linked-slant--bottom {
  background: #16a34a;
  transform: skewY(-3deg);
}

.linked-slant__content {
  transform: skewY(3deg);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  color: white;
  z-index: 1; /* Ensures content stays above overlapping sections */
  position: relative;
}

Method B: CSS Clip-Path (Precise Custom Shapes) #

If you need more control (like slanting only one corner or creating a custom diagonal split), clip-path is the way to go. No nested containers required:

<div class="custom-slant">
  <h2>Custom Slanted Div</h2>
  <p>Use clip-path to tweak every edge exactly how you want</p>
</div>
<div class="custom-slant custom-slant--connected">
  <h2>Connected Slanted Section</h2>
  <p>Matching the first section’s bottom slant perfectly</p>
</div>

.custom-slant {
  padding: 4rem 2rem;
  color: white;
}

.custom-slant:first-of-type {
  background: #f59e0b;
  /* Polygon points: (top-left, top-right, bottom-right, bottom-left) */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.custom-slant--connected {
  background: #ef4444;
  /* Reverse the bottom slant to match the first section’s edge */
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

Quick Tips for Success #

• Adjust skew angles or clip-path percentages incrementally to get the exact shape you want.
• For responsive designs, add media queries to tweak values on smaller screens (e.g., reduce skew angles on mobile to avoid cramped content).
• If you need to support older browsers (like IE), stick with the skew method—clip-path has limited support there.

Hope these solutions fit your project needs! If you had a specific custom shape in mind (like a diagonal split or multi-slanted edges), feel free to describe it in more detail and I can refine the code further.

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