css四个角边框效果

/* 定义一个带有四个角边框效果的盒子 */
.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  position: relative;
}

/* 左上角 */
.box::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  border-top: 10px solid black;
  border-left: 10px solid black;
  width: 0;
  height: 0;
}

/* 右上角 */
.box::after {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  border-top: 10px solid black;
  border-right: 10px solid black;
  width: 0;
  height: 0;
}

/* 左下角 */
.box .corner-bottom-left {
  content: '';
  position: absolute;
  bottom: -10px;
  left: -10px;
  border-bottom: 10px solid black;
  border-left: 10px solid black;
  width: 0;
  height: 0;
}

/* 右下角 */
.box .corner-bottom-right {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  border-bottom: 10px solid black;
  border-right: 10px solid black;
  width: 0;
  height: 0;
}

解释说明：

• .box 是主容器，设置了宽度、高度和背景颜色。
• 使用 ::before 和 ::after 伪元素来创建左上角和右上角的边框效果。
• 对于左下角和右下角，使用了额外的子元素 .corner-bottom-left 和 .corner-bottom-right 来实现边框效果。
• 每个角的边框是通过设置 border 属性并结合 width 和 height 为 0 来创建三角形的效果。