如何用CSS实现头部45度斜角？现有代码问题排查求助

Hey there! I feel your pain—spending two days on a CSS detail that just won’t click is so frustrating. Let’s break down what’s off in your current code and fix that Home button angle once and for all.

What’s Wrong With Your Current Approach? #

Your ::before pseudo-element is on the right track, but two key issues are throwing off the angle:

1. Positioning: Setting left: 32px keeps the pseudo-element inside the #secondHeader container, so it can’t extend left to create that angle before the Home button.
2. Transform Origin: Without defining transform-origin, the skew uses the element’s center as the pivot point, which misaligns the angle with the header’s edges.

Corrected CSS Solution #

Here’s the adjusted code with explanations for each change:

#header {
  float: left;
  margin-top: 20px;
  overflow: hidden;
  padding-bottom: 10px;
  background-color: #F1F1F1;
  box-shadow: 3px 3px 5px 0px #ccc;
  width: 100%;
  height: 130px;
  z-index: 1;
}

#secondHeader {
  float: right;
  background-color: #ffffff;
  width: 50%;
  height: 80px;
  position: relative;
  margin-top: -50px;
  margin-right: 15px;
  box-shadow: 3px 3px 5px 6px #ccc;
  z-index: 10;
}

#secondHeader::before {
  content: "";
  position: absolute;
  top: 0;
  /* Pull the pseudo-element outside the container to the left */
  left: -35px;
  /* Match the container's height for a clean edge */
  height: 100%;
  /* Width controls how far the angle extends left */
  width: 40px;
  /* Match the #secondHeader background (adjust to your actual color) */
  background-color: #ffffff;
  /* Skew from the top-right corner to align the angle perfectly */
  transform-origin: top right;
  transform: skewX(-45deg);
  /* Keep it behind the #secondHeader content */
  z-index: -1;
  /* Inherit the shadow to match the container's depth */
  box-shadow: inherit;
}

Key Adjustments Explained: #

• left: -35px: This pushes the pseudo-element outside the right-aligned #secondHeader, so it extends left to sit next to your Home button.
• transform-origin: top right: Skewing from the top-right corner ensures the angle’s top edge lines up perfectly with the header’s top, no misalignment.
• height: 100%: Matches the #secondHeader height, so the angle runs the full vertical length of the header section.
• box-shadow: inherit: Makes sure the angle has the same shadow as the rest of #secondHeader, keeping the design consistent.

Quick HTML Structure Check #

Make sure your HTML follows this hierarchy to ensure the layers work correctly:

<div id="header">
  <!-- Your Home button/left-side content here -->
  <div id="secondHeader">
    <!-- Right-side header content (navigation, search, etc.) -->
  </div>
</div>

Tweak the left and width values slightly if you need to adjust how far the angle extends—small changes here will fine-tune the look to match your original design exactly.

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