如何制作带左侧彩色条且边缘非90/45度的CSS盒子？

云原生阿岚

2026-8-1

实现带左侧斜角彩色条的盒子

可以用CSS的伪元素配合clip-path或者线性渐变来实现这种带斜角侧边的效果，以下是两种简单可行的方案：

方案一：伪元素+斜切变换

这种方法通过伪元素单独制作左侧彩色斜条，同时裁剪盒子边角来匹配斜条的角度，内容不会被影响。

HTML结构

<div class="color-side-box">
  这里是盒子内的文本内容，可以换行或者添加更多元素
</div>

CSS代码

.color-side-box {
  position: relative;
  width: 320px;
  padding: 24px;
  padding-left: 40px; /* 给左侧彩色条留出空间，避免内容被遮挡 */
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* 裁剪盒子左侧上下角，形成斜切效果 */
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%);
}

.color-side-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background: #2196F3; /* 替换成你需要的侧边颜色 */
  /* 斜切伪元素，角度和盒子裁剪的边角匹配 */
  transform: skewX(-12deg);
  transform-origin: top left;
}

方案二：线性渐变+裁剪路径

直接用背景渐变画出左侧彩色区域，再通过clip-path裁剪盒子形状，代码更简洁。

CSS代码

.color-side-box {
  width: 320px;
  padding: 24px;
  padding-left: 40px;
  background: linear-gradient(12deg, #2196F3 18px, #ffffff 18px);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}