如何用CSS伪元素实现分类元素底部三角边框？是否需新增HTML元素？

完全可以通过:before和:after伪元素实现自定义底部边框样式，无需新增HTML元素。以下是具体实现方法：

核心思路 #

1. 给.single-category设置position: relative，为伪元素提供定位基准
2. 利用伪元素生成装饰性边框，通过调整位置、尺寸、颜色匹配目标样式
3. 可移除原有元素的底部边框，避免样式冲突

修改后的完整代码 #

CSS部分 #

body {
  background-color: #f3ece5;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  padding: 40px;
}

.categories-grid .single-category {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px 0;
  border: 1px solid #e2d2c2;
  border-bottom: none; /* 移除原有底部边框，用伪元素替代 */
  background-color: white;
  position: relative; /* 伪元素定位基准 */
}

/* 示例：实现底部左右两段边框、中间留白的效果 */
.single-category::before,
.single-category::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: #e2d2c2;
}

.single-category::before {
  left: 0;
  width: 35%; /* 左侧边框宽度 */
}

.single-category::after {
  right: 0;
  width: 35%; /* 右侧边框宽度 */
}

/* 如果需要中间带特殊颜色的短边框，可替换为以下样式 */
/*
.single-category::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background-color: #a67c52; /* 自定义边框颜色 */
}
*/

HTML部分（无需修改） #

<section class="categories">
  <div class="container">
    <div class="categories-grid">
      <div class="single-category">
        <img src="https://via.placeholder.com/200x140" alt="image" />
        <h3>Title</h3>
        <div class="link">
          <a href="#">somewhere</a>
        </div>
      </div>
        
      <div class="single-category">
        <img src="https://via.placeholder.com/200x140" alt="image" />
        <h3>Title</h3>
        <div class="link">
          <a href="#">somewhere</a>
        </div>
      </div>
        
      <div class="single-category">
        <img src="https://via.placeholder.com/200x140" alt="image" />
        <h3>Title</h3>
        <div class="link">
          <a href="#">somewhere</a>
        </div>
      </div>
    </div>
  </div>
</section>

说明 #

• 伪元素的样式可根据参考图灵活调整：修改width、height、background-color、left/right定位值，就能实现不同的边框效果
• 全程无需改动现有HTML结构，仅通过CSS即可完成样式定制

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