css边框border斜线怎么做

在CSS中创建斜线边框通常需要通过伪元素`::before`和`::after`配合`transform`属性来实现。这里有一个简单的例子：

.box {
  position: relative;
  display: inline-block;
  border-width: 10px; /* 边框宽度，可以自定义 */
}

.box::before,
.box::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  transform-origin: bottom center; /* 起点位置 */
}

/* 创建上向的斜线 */
.box::before {
  top: 100%; /* 上边缘距离容器底部1像素 */
  border-left: 49px solid transparent;
  border-right: 49px solid transparent;
  border-bottom: 100px solid black; /* 边框颜色，可以自定义 */
}

/* 创建下向的斜线 */
.box::after {
  bottom: -100px; /* 下边缘超出容器1像素 */
  border-left: 49px solid transparent;
  border-right: 49px solid transparent;
  border-top: 100px solid black; /* 边框颜色，可以自定义 */
}

在这个例子中，`.box`元素会显示出从上到下的斜线。你可以调整数值来控制边框的倾斜程度。如果想改变斜线的方向，只需修改`top`、`bottom`、`border-left`和`border-right`的值即可。