你遇到的问题很典型——用border绘制的三角形元素没法直接加边框，毕竟三角形本身就是靠border的透明属性做出来的。不过我们可以用伪元素叠加的方法模拟边框效果：给每个三角元素做一个稍大的灰色"边框三角"放在下层，再给中间矩形直接加边框，就能完美衔接出完整的1px灰色边框。

下面是修改后的完整代码：

HTML（结构保持不变） #

<div class="yellow-ribbon-bottom-right"></div>
<div class="yellow-ribbon-mid"></div>
<div class="yellow-ribbon-top-left"></div>

CSS（添加边框效果） #

/* 通用样式：解决盒模型尺寸偏移问题 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.yellow-ribbon-top-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 30px 0 0;
  border-color: #eedc08 transparent transparent transparent;
  float: left;
  position: relative; /* 为伪元素提供定位基准 */
}

/* 左上三角的灰色边框：用伪元素做更大的灰色三角，放在黄色三角下层 */
.yellow-ribbon-top-left::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 31px 31px 0 0; /* 比原三角大1px，留出边框空间 */
  border-color: #ccc transparent transparent transparent; /* 灰色边框色 */
  z-index: -1; /* 让灰色边框藏在黄色三角下面 */
}

.yellow-ribbon-mid {
  width: 120px;
  height: 30px;
  float: left;
  background-color: #eedc08;
  border: 1px solid #ccc; /* 直接给中间矩形加灰色边框 */
}

.yellow-ribbon-bottom-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 30px 30px;
  float: left;
  border-color: transparent transparent #eedc08 transparent;
  position: relative; /* 为伪元素提供定位基准 */
}

/* 右下三角的灰色边框：同样用伪元素做更大的灰色三角 */
.yellow-ribbon-bottom-right::before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 31px 31px; /* 尺寸比原三角大1px */
  border-color: transparent transparent #ccc transparent; /* 灰色边框色 */
  z-index: -1; /* 藏在黄色三角下面 */
}

关键思路解释 #

1. 伪元素模拟三角边框：两个三角元素都设置了position: relative，然后用::before伪元素生成一个比原三角大1px的灰色三角，通过z-index: -1把它压在黄色三角下方，再用偏移量让灰色边框刚好从黄色边缘露出来。
2. 中间矩形直接加边框：中间的实心矩形可以直接加border，配合box-sizing: border-box确保尺寸不会被边框撑开，完美和两侧三角的边框衔接。
3. 完整轮廓衔接：伪元素的尺寸和偏移量刚好匹配中间矩形的边框，整个丝带的灰色边框会形成一个连贯的完整轮廓。

直接复制这段代码运行，就能看到你想要的带1px灰色边框的丝带效果啦！

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