能否为通过CSS边框绘制方式形成的边框设置背景？

当然可以啦！不过你得知道，这种用border拼出来的形状，本质是靠border的颜色属性撑起来的，直接写background确实不会生效——就像你代码里的background: transparent完全没起作用一样。不过咱们有好几种办法能实现类似“给这个形状加背景”的效果，我给你捋捋：

方法1：用border-image实现渐变/图片背景 #

如果想给这个三角形加渐变或者图片背景，可以用border-image代替直接设置border颜色。比如把底部边框换成渐变：

.object {
  position: relative;
  width: 300px;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  /* 用border-image实现渐变背景 */
  border-bottom: 100px solid;
  border-image: linear-gradient(to bottom right, #ff0000, #ff6600) 1 / 100px stretch;
}

这样你的三角形就会有渐变的“背景”效果，本质是把border的样式替换成了背景图或渐变。

方法2：伪元素叠加实现“背景+边框”效果 #

如果你的需求是给这个三角形加一层边框（比如外层红色，内层白色背景），可以用两个伪元素叠加：

.object {
  position: relative;
  width: 300px;
  height: 0;
}
/* 底层作为背景层 */
.object:before {
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ffffff; /* 背景色 */
}
/* 上层作为边框层 */
.object:after {
  content: '';
  position: absolute;
  top: 2px;
  left: calc(-50px + 2px);
  border-left: 48px solid transparent;
  border-right: 48px solid transparent;
  border-bottom: 96px solid red; /* 边框颜色 */
}

通过微调伪元素的大小和位置，就能模拟出带背景的边框效果，和你原本的思路也契合。

方法3：用clip-path绘制（更灵活） #

如果觉得border的方式太局限，不如直接用clip-path绘制三角形，这样就能正常使用background属性了：

.object {
  position: relative;
  width: 400px; /* 原width加上左右border的总宽度 */
  height: 100px;
  background: linear-gradient(45deg, red, orange); /* 直接用background设置渐变/纯色/图片 */
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

这种方式更直观，clip-path能画各种复杂形状，背景属性完全正常生效，后期调整也更方便。

总结一下：直接给border拼出来的形状加background确实不行，但通过上面这几种方法，完全能实现你想要的“带背景的边框形状”效果～

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