当前位置：首页 > CSS

css3边框直斜角制作

2026-01-08 20:27:32CSS

使用CSS3制作直斜角边框

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

border-image属性

通过border-image可以实现斜切边框效果：

div {
  width: 200px;
  height: 100px;
  border: 20px solid transparent;
  border-image: linear-gradient(45deg, red, blue) 1;
}

clip-path属性

clip-path可以创建更复杂的斜切形状：

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

transform属性组合

使用伪元素和transform实现斜角：

div {
  position: relative;
  width: 200px;
  height: 100px;
  background: #e74c3c;
}
div::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: white;
  transform: rotate(45deg) translate(10px, -10px);
}

linear-gradient背景

使用渐变背景模拟斜角效果：

div {
  width: 200px;
  height: 100px;
  background: 
    linear-gradient(135deg, transparent 10px, #2ecc71 10px),
    linear-gradient(225deg, transparent 10px, #2ecc71 10px),
    linear-gradient(315deg, transparent 10px, #2ecc71 10px),
    linear-gradient(45deg, transparent 10px, #2ecc71 10px);
  background-position: 
    top left,
    top right,
    bottom right,
    bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

多浏览器兼容方案

为确保跨浏览器兼容性，可以添加供应商前缀：

div {
  -webkit-clip-path: polygon(...);
  clip-path: polygon(...);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

动态斜角效果

结合CSS动画创建动态斜角：

css3边框直斜角制作

@keyframes angleChange {
  0% { clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 0 100%); }
  50% { clip-path: polygon(0 20px, 20px 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 0 100%); }
}
div {
  animation: angleChange 3s infinite;
}