CSS斜切边框（Skew borders）实现逻辑咨询及绘制求助

嘿，我来帮你搞懂CSS斜切边框的实现逻辑，顺便给你几个实用的代码示例！其实斜切边框的核心思路很简单：我们不会直接给元素加倾斜的border（因为那样会连内容一起歪），而是用伪元素单独做倾斜的形状，再把它定位到主元素旁边，模拟出边框的效果。

一、完整斜切边框（四边都倾斜） #

这是最常见的场景，比如一个整体带斜角边框的卡片：

实现步骤： #

1. 给主元素设置position: relative，让伪元素可以基于它定位；同时留好padding，避免内容和斜切边框重叠。
2. 用::before伪元素创建一个和主元素一样大的“底层框”，给它加边框，然后用transform: skew()让它倾斜。
3. 把伪元素的层级设得比主元素低（z-index: -1），这样主元素的内容就能正常显示在上面，不会跟着倾斜。

代码示例： #

/* 主元素 */
.skew-full-border {
  position: relative;
  padding: 2.5rem 3rem;
  background-color: #ffffff;
  color: #2d3748;
  font-size: 1rem;
  display: inline-block;
}

/* 斜切边框的伪元素 */
.skew-full-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #2b6cb0; /* 边框的宽度和颜色 */
  transform: skew(-12deg); /* 倾斜角度，负数是向左斜，正数向右 */
  z-index: -1; /* 把伪元素放到主元素下面 */
}

二、单边斜切边框（比如仅左侧/右侧） #

如果只需要某一边是斜切的，我们可以调整伪元素的大小和倾斜原点：

左侧斜切边框示例： #

.skew-left-border {
  position: relative;
  padding: 2rem 2.5rem;
  background-color: #ffffff;
  color: #2d3748;
  display: inline-block;
}

.skew-left-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25px; /* 边框的宽度 */
  height: 100%;
  background-color: #e53e3e; /* 边框颜色 */
  transform: skew(-15deg);
  transform-origin: top right; /* 以右上角为原点倾斜，让右侧边缘斜切 */
}

关键细节说明： #

• transform-origin：控制倾斜的基准点，默认是元素中心，调整它可以让斜切的方向更符合需求；
• 伪元素的大小：如果是单边边框，就把宽度（或高度）设成边框的厚度，高度（或宽度）占满主元素；
• 倾斜角度：skew(Xdeg, Ydeg)可以分别控制水平和垂直方向的倾斜，只写一个值的话默认是水平方向。

三、核心逻辑总结 #

斜切边框的本质是分离内容层和视觉装饰层：主元素负责承载内容（保持正常排版），伪元素负责做倾斜的装饰形状（模拟边框），通过定位和层级控制让两者组合出我们想要的效果。你可以自由调整倾斜角度、边框颜色、厚度，甚至给伪元素加圆角、渐变，来适配不同的设计风格。

多试几次不同的参数，很快就能掌握啦！

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