如何用CSS实现该倾斜形状？求助完成设计要求的区块效果

嘿，我看了你贴的代码片段，大概能猜到你想做的是图片块向上偏移覆盖顶部绿色区块，同时图片左侧带一条紫色竖线的布局对吧？咱们来一步步调整，把它改成符合设计图的效果！

先排查你现有代码的几个问题点： #

• 缺少完整的HTML结构，flex布局的列宽没明确设置，容易导致布局混乱
• .col-img:after的right: 100%会让伪元素跑到图片列的最左侧外面，但如果没有给父容器或者列设置合适的定位参考，这条竖线可能会看不到
• .section-2没有设置足够的高度，偏移后的图片可能会被截断

修正后的完整代码（包含HTML+CSS） #

HTML结构：

<div class="section-1"></div>
<div class="section-2">
  <div class="col col-img">
    <img src="your-image-path.jpg" alt="展示图片">
  </div>
  <div class="col col-text">
    <h2>区块标题</h2>
    <p>这里是区块的文本内容，用来和左侧的图片区域搭配展示。</p>
  </div>
</div>

CSS样式：

/* 先重置默认样式，避免浏览器自带的margin/padding干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section-1 {
  background: green;
  height: 100px;
}

.section-2 {
  display: flex;
  align-items: center;
  /* 给区块加左右内边距，避免内容贴边 */
  padding: 0 2rem;
  /* 设置最小高度，确保偏移后的图片能完整显示 */
  min-height: 140px;
}

.col-img {
  margin-top: -40px; /* 向上偏移，覆盖顶部绿色区块的底部 */
  position: relative;
  /* 设置图片列的固定宽度占比，可根据需求调整 */
  flex: 0 0 35%;
  /* 图片和文本区之间的间距 */
  margin-right: 2rem;
}

.col-img:after {
  position: absolute;
  left: -1.25rem; /* 往左偏移，露出图片左侧的紫色竖线 */
  top: 40px; /* 和你原来的设置保持一致，控制竖线的起始高度 */
  bottom: 0;
  width: 10px;
  background: purple;
  content: '';
}

.col-img img {
  width: 100%;
  vertical-align: top;
  /* 可选：给图片加圆角，更贴近设计感 */
  border-radius: 8px;
}

.col-text {
  /* 文本列自动占满剩余宽度 */
  flex: 1;
}

关键调整说明： #

1. 补充HTML结构：明确了flex容器下的两个列，确保布局层级清晰
2. 重置全局样式：用box-sizing: border-box避免内边距影响宽度计算，消除浏览器默认样式干扰
3. 优化伪元素位置：把right: 100%改成left: -1.25rem，让紫色竖线准确出现在图片左侧的可视区域
4. 稳定flex布局：给两个列设置了flex宽度，确保图片区和文本区的比例固定
5. 保障容器高度：给.section-2加了min-height，避免偏移后的图片被容器截断

你可以根据设计图的实际尺寸，调整margin-top、flex占比、left偏移量这些数值，就能完美匹配需求啦！

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