如何使用::before为块元素实现示例图中的同类边框效果

实现思路：结合CSS变量、背景渐变与::before/::after伪元素实现，无需额外嵌套DOM节点，支持任意尺寸的块级容器，参数可灵活调整。

代码示例 #

HTML结构 #

<div class="corner-border-card">
  这里放容器内容，支持任意宽高、任意内容填充
</div>

CSS样式 #

.corner-border-card {
  position: relative;
  padding: 24px;
  /* 边框参数变量，可按需修改 */
  --border-color: #165DFF;
  --border-width: 2px;
  --corner-length: 24px;
  /* 用背景渐变实现右上角、左下角边框 */
  background: 
    linear-gradient(to left, var(--border-color) var(--border-width), transparent var(--border-width)) top right / var(--corner-length) var(--border-width) no-repeat,
    linear-gradient(to bottom, var(--border-color) var(--border-width), transparent var(--border-width)) top right / var(--border-width) var(--corner-length) no-repeat,
    linear-gradient(to right, var(--border-color) var(--border-width), transparent var(--border-width)) bottom left / var(--corner-length) var(--border-width) no-repeat,
    linear-gradient(to top, var(--border-color) var(--border-width), transparent var(--border-width)) bottom left / var(--border-width) var(--corner-length) no-repeat,
    /* 容器本身的背景色，可按需修改 */
    #f8fafc;
  /* 容器基础样式，可按需修改 */
  width: 320px;
  color: #333;
}

/* 用伪元素实现左上角、右下角边框 */
.corner-border-card::before,
.corner-border-card::after {
  content: '';
  position: absolute;
  width: var(--corner-length);
  height: var(--corner-length);
  border: var(--border-width) solid var(--border-color);
  pointer-events: none;
}
.corner-border-card::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.corner-border-card::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

可调参数说明 #

• 修改--border-color变量可调整边框颜色
• 修改--border-width变量可调整边框粗细
• 修改--corner-length变量可调整每个角边框的长度
• 容器支持自适应宽高，无需固定尺寸适配响应式场景

如需边框在容器外部展示，将::before的定位改为top: calc(-1 * var(--border-width)); left: calc(-1 * var(--border-width));，::after的定位改为bottom: calc(-1 * var(--border-width)); right: calc(-1 * var(--border-width));，同时给容器添加对应数值的margin避免边框被裁切。

内容的提问来源于stack exchange，提问作者Yuri Fedotov