当前位置：首页 > CSS

css3边框直斜角制作

2026-01-27 23:09:45CSS

使用CSS3制作直斜角边框

通过CSS3的clip-path属性可以轻松实现直斜角效果。这种方法支持任意角度和方向的斜切，且不影响内容布局。

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

使用伪元素创建斜角

通过::before或::after伪元素配合旋转和定位实现斜角效果，适合需要单独控制斜角样式的场景。

.slant-box {
  position: relative;
  width: 200px;
  height: 100px;
  background: #e74c3c;
  overflow: hidden;
}
.slant-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: white;
  transform: rotate(45deg) translate(15px, -15px);
}

使用border-image实现斜切

结合SVG和border-image属性可以创建复杂的斜切边框，支持渐变和图案填充。

.border-slant {
  width: 200px;
  height: 120px;
  border: 20px solid transparent;
  border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><polygon points="0,20 20,0 40,0 60,20 60,40 40,60 20,60 0,40" fill="%23f39c12"/></svg>') 20;
}

线性渐变模拟斜角

通过CSS渐变背景的巧妙设计，可以视觉上模拟斜角效果，适合简单场景。

.gradient-slant {
  width: 200px;
  height: 100px;
  background: 
    linear-gradient(135deg, transparent 15px, #2ecc71 15px),
    linear-gradient(-135deg, transparent 15px, #2ecc71 15px);
  background-size: 50% 100%;
  background-position: left, right;
  background-repeat: no-repeat;
}