如何实现带斜对角边框的CSS div 兼容border-radius属性？

方案1：伪元素独立形变实现（兼容性最好） #

这种方式把边框和背景效果交给单独的伪元素处理，skew只会作用于伪元素，完全不会影响内部内容的显示，也支持自定义圆角：

.target-box {
  position: relative;
  width: 300px;
  padding: 16px 24px;
  /* 预留边框宽度的内边距 */
  box-sizing: border-box;
  border-radius: 8px 0 8px 8px;
  overflow: hidden;
  z-index: 1;
}
/* 边框层伪元素 */
.target-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 单独对伪元素做skew变换，调整角度适配设计要求 */
  transform: skewX(-15deg);
  transform-origin: top right;
  border: 2px solid #2563eb;
  border-radius: 8px;
  z-index: -1;
}
/* 背景层如果需要也可以单独做伪元素，和边框层逻辑一致 */
.target-box::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  transform: skewX(-15deg);
  transform-origin: top right;
  background: #eff6ff;
  border-radius: 6px;
  z-index: -2;
}

方案2：多重线性渐变实现（代码更简洁） #

如果不需要兼容太老旧的浏览器，用渐变组合实现效果更灵活，不需要额外处理形变适配：

.target-box {
  width: 300px;
  padding: 16px 24px;
  border: 2px solid transparent;
  border-radius: 8px;
  /* 第一层是内部背景，第二层是边框渐变层 */
  background: 
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, transparent 24px, #2563eb 0) border-box;
}

如果需要调整斜角的大小，修改上面transparent后的数值即可，不需要调整其他属性

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