Javascript 我想在我的网络中有一个三角形，并用图片填充它

我正在设计一个小网页，只是为了练习。我是一个乞丐，正如标题所说，我需要创建一个带有背景图像的三角形。 我创建了这个模型：

我说的是柱子右上角的三角形

据我所知，创建triagle的唯一方法是在CSS中使用边框，但这不会有帮助，因为我需要使用图像

也许你还有别的想法 谢谢

：根{ -图像块宽度：105px； -图像块高度：80px； /*css变量*/ } .imagediv{ 宽度：var imageblockwidth； 高度：高度； 背景图像：urlhttps://i.ytimg.com/vi/2fb-g_V-UT4/hqdefault.jpg; 背景尺寸：包含； 背景重复：无重复； } .imageoverlapper{ 宽度：var imageblockwidth； 高度：高度； 框大小：边框框； /*使用边界的三角形*/ 边框顶部：var imageblockheight实体rgba0,0,0,0； 左边框：var imageblockwidth纯黄色； 位置：相对位置； 顶部：calc-1*var imageblockheight； }

---

如果您需要帮助将其纳入自己的代码中，请告诉我，以下是示例：

div{ 位置：绝对位置； 宽度：128px； 高度：128px； 背景图像：urlhttp://i.imgur.com/envk4PP.png; 背景重复：无重复； 背景尺寸：封面； -webkit剪辑路径：Polygon012%、086%、35%50%； 剪辑路径：polygon0%，100%100%，100%0%； }

---

我必须做一些类似的网站，这是我的例子。我希望你能使用它

.过热{ 填充：40px0； -webkit剪辑路径：polygon0,0%0,20.3%100%，0%100%； -moz剪辑路径：polygon0,0%0,20.3%100%，0%100%； 剪辑路径：polygon0,0%0,20.3%100%，0%100%； 背景图片：url'http://www.todofermentacion.cl/assets/img/cerveza.png'; } .页眉{ 填充：50px； } 另一种选择：

.邮政{ /*不重要*/ 利润率：100像素； 宽度：10雷姆； 身高：5雷姆； 边框：实心1px黑色； 背景：象牙； 填充：1rem； /*重要的*/ 位置：相对位置； 溢出：隐藏； } .post:之后{ 位置：绝对位置； 显示：块； 内容：； 背景图像：urlhttps://www.gravatar.com/avatar/614f3577183f1a9219884f73ec2538fd; 变换：旋转45度； 宽度：50px； 高度：50px； /*移动一半宽度*/ 顶部：-25px； 右：-25px； } 这是我的帖子

---

所以，你只需要一些代码就可以用背景图像制作一个三角形？嗯，是的，听起来很傻，但我真的不知道怎么做。HTML中没有三角形元素。你可以做的是在CSS中使用剪辑路径，但浏览器支持还不是很好，至少如果你必须支持IE:的话，回退将是一个矩形，看起来可能很难看。我以前见过这个，但我的图像无法旋转。无论如何，如果你不介意旋转图像，这是一个好主意@用户7393973这两种想法是相同的。这似乎是可行的，我将寻找更多关于剪辑路径和多边形的信息。谢谢你们！抱歉，我意识到剪辑路径在Firefox和Edge上不起作用，你知道另一种解决方案吗？@NicolásVera For Firefox use-moz clip path，但在Edge上，你只能将其应用于html svg元素。我编辑了我的回答，我试过了，但没用，似乎剪辑路径不是交叉的。我用一个带边框的隐藏三角形做了我想做的事情，它的颜色与背景相同，但z索引比图像高，因此图像看起来像被剪切了对不起，我意识到剪辑路径在Firefox和Edge上不起作用，你知道另一种解决方案吗？