border-image-repeat不生效：如何实现三角形图片重复的上下边框？

看起来你现在的问题出在border-image的切片参数和重复模式设置上，导致只显示了单个三角形。咱们一步步来修正：

问题根源分析 #

你当前的代码里：

• border-width: 5px 5px 18px 20px：上下边框宽度不一致，且左右边框也设置了宽度，但你要的是上下边框，左右其实不需要。
• border-image-slice: 0 0 18 20：这个参数只指定了从图片底部切18px、左侧切20px，完全没给顶部边框分配切片区域，所以顶部边框只能用默认的solid样式；底部边框用了左侧的切片，再加上stretch模式会拉伸图片，自然只会显示一个三角形。

正确实现步骤 #

假设你的三角形图片是18px高、20px宽的可无缝重复单元（比如一个向右的小三角形），按下面的代码调整：

border-style: solid;
border-width: 18px 0; /* 上下边框高度设为图片的高度，左右无边框 */
border-image: url('../../img/triangle.png') 18 0 fill repeat;

参数详解 #

1. border-width: 只保留上下边框的宽度（和三角形图片的高度一致），左右设为0，避免多余的边框。
2. border-image-slice: 18 0对应「上、右、下、左」四个方向的切片距离，这里上和下都切18px（刚好覆盖整个图片的高度），左右切0px，这样整个图片会被用作上下边框的重复单元。
3. repeat: 替换原来的stretch，让三角形图片在边框长度方向上重复排列，而不是被拉伸。
4. fill: 保留图片的中间填充区域（这里左右边框为0，中间区域不会显示，所以可以保留）。

额外注意事项 #

• 确保你的三角形图片是无缝重复的单元：比如三角形的边缘要对齐，重复后不会出现缝隙或错位。
• 如果你的三角形尺寸不是18px×20px，记得把border-width和border-image-slice里的数值替换成你实际的图片尺寸。

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