如何用纯CSS将图片置于基础梯形内？求可运行JSFiddle代码示例

我来帮你搞定这两个头疼的CSS布局问题！先逐个拆解：

问题1：用纯CSS将图片放入基础梯形中 #

你原来用border实现梯形的方式，确实很难直接放置背景图——因为border的背景渲染逻辑和普通容器不一样。推荐两种更灵活的方案：

方案1：使用clip-path裁剪容器（最直观） #

通过clip-path把容器裁剪成梯形，图片放在里面会自动适配形状，完全不需要担心变形问题：

<style>
/* 梯形容器 */
.trapezoid-image-box {
  width: 400px;
  height: 100px;
  /* 调整四个点的百分比可以自定义梯形的倾斜程度 */
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  overflow: hidden;
}

/* 图片适配容器 */
.trapezoid-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选contain，根据你的需求选择 */
}
</style>

<div class="trapezoid-image-box">
  <img src="https://image.ibb.co/e5Kaw7/image.png" alt="示例图片">
</div>

方案2：使用3D变换创建梯形容器 #

如果你需要保留border式梯形的视觉效果，也可以用perspective+transform实现，图片放在变换后的容器里：

<style>
.trapezoid-wrap {
  perspective: 1000px;
  width: 400px;
  height: 100px;
}

.trapezoid-inner {
  width: 100%;
  height: 100%;
  transform: rotateX(15deg); /* 调整角度改变梯形倾斜度 */
  background-image: url('https://image.ibb.co/e5Kaw7/image.png');
  background-size: cover;
  transform-origin: bottom; /* 以底部为旋转中心，保持底部对齐 */
}
</style>

<div class="trapezoid-wrap">
  <div class="trapezoid-inner"></div>
</div>

问题2：将图片置于下方红色梯形的顶部 #

要让图片和红色梯形无缝贴合，用Flex布局是最简单的方案，绝对定位则适合更精确的位置控制：

方案1：Flex布局（快速实现无缝贴合） #

把图片容器和梯形放在一个flex容器里，设置垂直排列就能自动紧密对齐：

<style>
.image-container {
  width: 400px;
  height: 100px;
  background-image: url('https://image.ibb.co/e5Kaw7/image.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.trapezoid {
  border-top: 100px solid red;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 200px;
  margin: 0 auto; /* 让梯形和图片居中对齐 */
}

/* 父容器控制排列 */
.layout-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

<div class="layout-wrapper">
  <div class="image-container"></div>
  <div class="trapezoid"></div>
</div>

方案2：绝对定位（精确控制位置） #

如果需要调整图片和梯形的间距，或者梯形不在正中间，用绝对定位更灵活：

<style>
.wrapper {
  position: relative;
  width: 400px;
}

.image-container {
  width: 100%;
  height: 100px;
  background-image: url('https://image.ibb.co/e5Kaw7/image.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.trapezoid {
  border-top: 100px solid red;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 200px;
  position: absolute;
  top: 100px; /* 刚好在图片底部下方 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
}
</style>

<div class="wrapper">
  <div class="image-container"></div>
  <div class="trapezoid"></div>
</div>

以上代码都可以直接运行，你可以根据自己的需求调整尺寸、倾斜度或者图片适配方式~

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