如何仅用HTML和CSS创建仅单边带边框的三角形

以下是两种实用的实现方案，解决你提到的添加单边边框的难题：

方法一：伪元素双层叠加法（兼容性好，易调整） #

通过两个尺寸略有差异的三角形叠加，让下层边框色三角形仅露出单边，上层填充色三角形盖住其余三边的边框。

示例：底部带边框的向上三角形 #

HTML结构：

<div class="triangle-up-border"></div>

CSS样式：

.triangle-up-border {
  position: relative;
  width: 0;
  height: 0;
}

/* 下层：边框色三角形（尺寸稍大） */
.triangle-up-border::before {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 0 15px 20px 15px;
  border-color: transparent transparent #2c3e50 transparent; /* 边框颜色 */
  bottom: -1px; /* 向下偏移1px，让上层填充三角形盖住多余边框 */
}

/* 上层：填充色三角形（尺寸稍小） */
.triangle-up-border::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 0 14px 19px 14px;
  border-color: transparent transparent #ffffff transparent; /* 填充色需与背景色一致 */
}

方向调整技巧 #

• 右侧带边框的向左三角形：修改border-width为15px 0 15px 20px，边框色设为transparent transparent transparent #2c3e50
• 顶部带边框的向下三角形：修改border-width为20px 15px 0 15px，边框色设为#2c3e50 transparent transparent transparent

方法二：线性渐变拼接法（无需伪元素） #

利用linear-gradient拼接边框线条与填充区域，适合需要自定义边框细节的场景。

示例：右侧带边框的向左三角形 #

HTML结构：

<div class="triangle-left-border"></div>

CSS样式：

.triangle-left-border {
  width: 30px;
  height: 30px;
  background: 
    linear-gradient(45deg, transparent 50%, #2c3e50 50%, #2c3e50 51%, transparent 51%) top right,
    linear-gradient(-45deg, transparent 50%, #2c3e50 50%, #2c3e50 51%, transparent 51%) bottom right,
    linear-gradient(135deg, #ffffff 50%, transparent 50%);
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

解释：前两个小渐变分别画出右上角和右下角的边框线条，第三个渐变画出填充的三角形区域，三者组合后呈现出右侧带边框的向左三角形。

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