如何使用CSS为Div的底部边框实现单侧倾斜效果？

要实现底部单侧（左/右）倾斜的边框效果，最灵活的方式是用伪元素模拟，或者用背景渐变实现，以下是具体方案：

方法一：伪元素+Transform（推荐，易控制） #

通过::after伪元素生成倾斜的边框，配合定位和变形属性精准控制效果：

示例1：仅底部左侧倾斜边框 #

.skew-bottom-left {
  position: relative;
  padding: 1.2rem;
  width: 320px;
  background: #ffffff;
  /* 基础样式按需调整 */
}

.skew-bottom-left::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px; /* 倾斜边框的长度 */
  height: 3px; /* 边框厚度 */
  background: #34495e; /* 边框颜色 */
  transform: skewX(45deg); /* 倾斜角度，正值左斜，负值右斜 */
  transform-origin: bottom left; /* 以左下角为倾斜原点 */
}

示例2：底部右侧倾斜边框 #

只需调整伪元素的定位和倾斜方向：

.skew-bottom-right {
  position: relative;
  padding: 1.2rem;
  width: 320px;
  background: #ffffff;
}

.skew-bottom-right::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70px;
  height: 3px;
  background: #34495e;
  transform: skewX(-45deg);
  transform-origin: bottom right;
}

示例3：完整底部边框+单侧倾斜 #

如果需要底部大部分是直边框，仅单侧倾斜，可再加一个::before伪元素做直边框：

.full-bottom-skew-left {
  position: relative;
  padding: 1.2rem;
  width: 320px;
  background: #ffffff;
}

/* 倾斜部分 */
.full-bottom-skew-left::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 3px;
  background: #34495e;
  transform: skewX(45deg);
  transform-origin: bottom left;
}

/* 直边框部分 */
.full-bottom-skew-left::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 70px; /* 和倾斜部分宽度一致 */
  right: 0;
  height: 3px;
  background: #34495e;
}

方法二：线性渐变背景（无需伪元素） #

用linear-gradient模拟倾斜边框，适合简单场景：

.gradient-skew-bottom {
  padding: 1.2rem;
  width: 320px;
  background: #ffffff;
  /* 左侧倾斜边框 */
  background-image: linear-gradient(45deg, transparent 50%, #34495e 50%);
  background-size: 70px 3px;
  background-repeat: no-repeat;
  background-position: bottom left;
  /* 可选：加完整底部直边框 */
  border-bottom: 3px solid #34495e;
}

关键调整点 #

• 倾斜角度：修改skewX()的数值（正负控制方向）或渐变角度
• 边框尺寸：调整伪元素的width/height或渐变的background-size
• 颜色：直接修改background属性值

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