PAYATHON 2026

如何使用 CSS 让 border bottom 的一侧倾斜？

技术老齐

要让底部边框保持水平、只有一端斜切，建议用 ::after 绘制一条色带，再用 clip-path: polygon() 裁出斜边。底边的厚度、颜色和斜切宽度都可以单独调整，div 内的文字也不会变形。

问题中没有提供图片，这里以右端斜切为例。整条底边倾斜的做法见后文。

为什么不能直接设置 border-bottom

border-bottom 可以设置边框的宽度、样式和颜色，没有单独控制端点倾斜角度的属性。它与左右边框连接时会形成接合区域，形状受相邻边框影响。

这种装饰性底边用伪元素更容易控制：父元素负责布局，伪元素绘制形状。

实现右端斜切的底边

给 div 设置 position: relative，让伪元素相对于它定位。将伪元素放在底部，用四个顶点定义斜切后的轮廓。

<div class="slanted-border">
  这里是内容，底部色带的右端带有斜切效果。
</div>
.slanted-border {
  --border-height: 8px;
  --slant-width: 12px;
  --border-color: #2563eb;

  position: relative;
  max-width: 360px;
  padding: 24px 24px calc(24px + var(--border-height));
  background: #f3f4f6;
}

.slanted-border::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--border-height);
  background: var(--border-color);

  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--slant-width)) 100%,
    0 100%
  );

  pointer-events: none;
}

底边由伪元素的背景绘制。polygon() 的四个点依次对应左上角、右上角、右下角和左下角。右下角向左缩进 12px，使右端形成斜边，左端保持垂直。

调整形状时，修改这两个变量即可：

  • --border-height 控制色带厚度。
  • --slant-width 控制斜切的水平距离。厚度固定时，这个值越大，斜边越平缓；两者相等时，斜边与水平线呈 45°。

斜切距离使用固定长度，因此容器宽度变化时，端部形状仍能保持一致。

如何改成左端斜切

保留其他样式，只替换 clip-path：

.slanted-border::after {
  clip-path: polygon(
    var(--slant-width) 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

这里将左上角向右缩进，右端保持垂直。要反转斜切方向，调整同一端上下两个顶点的位置即可。

如果要让整条底边倾斜

可以通过旋转伪元素，让整条线向上或向下倾斜。用下面的样式替换前面的伪元素规则：

.slanted-border::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--border-height);
  background: var(--border-color);

  transform: rotate(-2deg);
  transform-origin: left center;

  pointer-events: none;
}

旋转后的线条可能超出容器，需要根据实际布局留出空间。不要直接旋转父 div，否则内容也会跟着旋转。

使用时注意

绝对定位的伪元素不会撑开父元素。示例增加了底部 padding，以免色带覆盖内容。

把 clip-path 设置在伪元素上。如果设置在父 div 上，父元素的背景和内容也会被裁剪。已有的 border-bottom 也要移除，以免与色带叠加。

线条只有 1px 左右时，端部斜切很难辨认，需要结合厚度和显示比例判断实际效果。

备注：内容仅供参考。