边框颜色与img

Question

是否可以使图像的边框形状为三角形？

目前我正在创建这样的三角形：

.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;
     }
}

以红色为例，我做border-color: #ae1800 transparent transparent transparent; 但我怎么能用背景图像替换颜色？

感谢您的回答。

Answer 1

这样做的最好方法是在photoshop中创建一个带边框的图像，然后在三角形外面创建一个透明背景。而不是使用CSS来显示它而不是使用JS。

我希望这有帮助！