如何使用CSS实现div元素的自定义目标形状

以下是两种常用的实现方式，可根据兼容性需求选择：

方案1：clip-path 实现（现代浏览器推荐） #

代码最简洁，通过自定义裁剪路径直接切出斜角：

/* div标签样式 */
.shape {
  width: 220px;
  height: 50px;
  background-color: #165DFF;
  /* 按需求调整斜角宽度，此处示例左侧留20px斜角 */
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
}

如果需要斜角在右侧，修改裁剪坐标即可：

clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);

方案2：伪元素+border实现（兼容低版本浏览器） #

如果需要兼容IE等老旧浏览器，可以用透明border模拟斜角：

.shape {
  position: relative;
  width: 200px;
  height: 50px;
  padding-left: 20px;
  background-color: #165DFF;
  line-height: 50px;
  color: #fff;
}
.shape::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  /* 边框高度和容器高度一致 */
  border-top: 50px solid transparent;
  /* 此处颜色和容器的父级背景色保持一致，斜角宽度由border-left宽度控制 */
  border-left: 20px solid #ffffff;
}

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