如何仅用CSS实现透明斜切边框？无需SVG、PNG等资源

当然有纯CSS的方案能搞定透明斜切边缘，完全不需要依赖SVG、图片资源，甚至不用jQuery遮罩！下面给你两种实用的方法：

方法一：使用clip-path（推荐） #

clip-path可以直接精准裁剪元素形状，斜切边缘天然就是透明的，完美匹配你的需求。

示例代码：

<div class="skewed-box">
  这里是需要展示的内容
</div>

.skewed-box {
  width: 300px;
  height: 200px;
  background: #2c3e50;
  /* 自定义斜切角度：左上角向右偏移20px，右下角向左偏移20px */
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  color: white;
  padding: 20px;
}

你只需要调整polygon()里的像素值，就能轻松改变斜切的角度和幅度，非常灵活。

方法二：伪元素+渐变背景（兼容旧浏览器） #

如果需要兼容IE这类不支持clip-path的旧环境，可以用这个方法：通过伪元素添加透明渐变，模拟出斜切的透明边角。

示例代码：

<div class="skewed-box">
  这里是需要展示的内容
</div>

.skewed-box {
  position: relative;
  width: 300px;
  height: 200px;
  background: #2c3e50;
  color: white;
  padding: 20px;
  overflow: hidden;
}

.skewed-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 用渐变"挖"出左上角和右下角的透明斜切角 */
  background: linear-gradient(135deg, transparent 20px, transparent 0),
              linear-gradient(-135deg, transparent 20px, transparent 0);
  background-position: top left, bottom right;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

这个方法利用渐变的透明区域覆盖斜切部分，配合父元素的overflow:hidden，就能实现视觉上的透明斜切边缘。

对比你当前的实现，这两种方案都不需要额外的白色div，也完全不需要JS介入，纯CSS就能解决问题，你可以根据自己的浏览器兼容需求选择合适的方案~

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