当前位置：首页 > CSS

css3边框直斜角制作

2026-04-01 01:36:16CSS

使用CSS3制作直斜角边框

CSS3提供了多种方法来实现直斜角边框效果，以下是几种常见的方法：

使用CSS clip-path属性

clip-path属性可以裁剪元素的显示区域，通过定义多边形路径来实现直斜角效果。

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  clip-path: polygon(
    0 20px,
    20px 0,
    100% 0,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    0 100%
  );
}

使用CSS transform属性

通过伪元素和transform属性可以实现直斜角效果。

.box {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #e74c3c;
  overflow: hidden;
}

.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #fff;
  transform: rotate(45deg) translate(-14px, -14px);
}

使用CSS border-image属性

border-image属性可以创建复杂的边框效果，包括斜角。

.box {
  width: 200px;
  height: 100px;
  border: 20px solid transparent;
  border-image: linear-gradient(45deg, #2ecc71, #27ae60) 1;
}

使用CSS伪元素和边框组合

通过伪元素和边框的组合可以创建精确的直斜角效果。

.box {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #9b59b6;
}

.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 20px solid #fff;
  border-right: 20px solid transparent;
}

使用CSS mask属性

mask属性可以实现更复杂的形状裁剪。

css3边框直斜角制作

.box {
  width: 200px;
  height: 100px;
  background-color: #f1c40f;
  -webkit-mask: 
    linear-gradient(135deg, transparent 15px, #000 0) top left,
    linear-gradient(-135deg, transparent 15px, #000 0) top right,
    linear-gradient(-45deg, transparent 15px, #000 0) bottom right,
    linear-gradient(45deg, transparent 15px, #000 0) bottom left;
  -webkit-mask-size: 50% 50%;
  -webkit-mask-repeat: no-repeat;
}

这些方法各有优缺点，clip-path和mask属性提供了最灵活的控制，但在较旧浏览器中可能不完全支持。transform和伪元素方法兼容性更好，但实现复杂形状时可能需要更多代码。