如何实现div元素的顶部与左侧边框倾斜效果

API 探路者

2026-8-19

实现div顶部和左侧边框倾斜的解决方案

针对你遇到的skew导致整体元素倾斜、clip-path丢失边框的问题，可以通过伪元素+分层定位的方式实现需求，既保留边框样式，又不影响内部内容的布局：

核心思路

用伪元素模拟倾斜的边框容器，将实际内容放在独立层级中，让伪元素负责呈现倾斜的边框效果，内容层保持正常排版。

完整代码实现

CSS 代码

.container{ 
  max-width: 80%; 
  margin:auto; 
}
.section1{ 
  background: #541A81; 
  padding: 60px 0; 
}
.content{ 
  position: relative;
  background:#ffffff; 
  border-radius: 50px; 
  padding: 168px 60px 92px; 
  /* 内容层保持正常排版，不做skew变换 */
}
/* 伪元素实现倾斜边框 */
.content::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 7px dashed #FFFD54;
  border-radius: 50px;
  transform: skew(10deg, 0);
  z-index: -1; /* 将伪元素置于内容下方，避免遮挡 */
}

HTML 代码

<div class="section1"> 
  <div class="container"> 
    <div class="content"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ad hic distinctio laboriosam iste neque quibusdam, adipisci sed magni explicabo nemo delectus nesciunt numquam non ducimus enim voluptatem ipsam! Esse! </p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus dolorum unde debitis quos velit repudiandae. Explicabo, veniam, totam? Consectetur eum ab veniam, consequatur nemo, beatae soluta blanditiis quas quos dicta.</p> 
    </div> 
  </div> 
</div>