Html 带img的边框颜色

有可能有一个三角形形状的图像边框吗

目前，我正在创建如下三角形：

.triangle {
  display: block;
  margin: 0 auto;
  height: 51px;
  width: 103px;



 &:after {
      content: "";
      display: block;
      border: inset 52px;
      border-color: rgba(51, 51, 51, 0.4) transparent transparent transparent;
      border-top-style: solid;
     }
}

例如，要使颜色为红色，我需要

边框颜色：#ae1800透明
但是我怎样才能用背景图像替换颜色呢

谢谢您的回答。
最好的方法是在photoshop中创建一个带有边框的图像，然后在三角形外创建一个透明背景。不要使用css来显示它，而是使用JS

我希望这有帮助
 你可以发布一个示例图像，它应该是什么样子的？我不明白。也许是一个代码笔，你已经尝试过的例子。这基本上创建了一个三角形，高51px宽103px。颜色是由边框颜色定义的，透明的右下角和左下角基本上就是这样形成三角形的原因：。但我真的不明白，你为什么要在边界中使用图像？只需放置一个背景图像…？而不是灰色，我想把纹理，我重复在它。作为“背景”。