html - 带有 img 的边框颜色

Question

是否可以使用三 Angular 形的图像边框？

目前我正在这样创建我的三 Angular 形:

.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 之类的软件中只创建一个带边框的图像，然后在三 Angular 形外部使用透明背景制作它。而不是使用 css 来显示它，而是使用 JS。

希望对您有所帮助!