如何在不使用边框和图像的情况下在div上创建CSS三角形背景？

我知道如何使用CSS和边框以及图像创建三角形，但在我的例子中，我想使用背景色

我想要像这样的图片

---

有人能帮我吗？

使用CSS边框创建三角形的问题是它们在样式设计方面缺乏灵活性。因此，您可以使用相对完整的伪成熟元素，提供更多样式选项：

当然，您可以这样做，例如：

---

另一种方法是使用背景线性渐变。 诀窍是将方向设置为右下角，将第一个范围设置为白色（或透明），将第二个范围设置为您想要的颜色

在以下示例中，背景的前半部分为白色（从0%到50%），后半部分为金黄色（从50%到100%）

.triangle{
宽度：200px；
高度：200px；
背景：线性梯度（至右下角，#fff 0%，#fff 50%，#a48d01 50%，#a48d01 100%）；
}

---

尝试使用此工具生成所需的形状：。然后根据需要调整代码。例如，这是获得三角形的方法：

-webkit剪辑路径：多边形（50%0%、0%100%、100%100%）； 剪辑路径：多边形（50%0%，0%100%，100%100%）

---

支持但并不是最好的，因为它只在Firefox中得到完全支持，在Edge/IE中不存在，因此不鼓励在生产网站上使用

这个“三角形”看起来如何？是多个三角形，重复的背景还是什么？不，有一个三角形和一些文本具有相同的div。基本上你是在寻找一个三角形形状的div（对吗）。如果是这样，那是不可能的。也许你有你想要的图像。我想用背景色而不是背景图像。你有什么想法吗？…只需设置背景色，而不是…？我想三角背景色，而不使用边框和图像。我怎么做？你还有其他的想法吗？上面的工作你试过改变它吗？将背景图像更改为背景-color@SW4你知道如何改变角度使三角形变小吗？像145度的箭头？（也不使用边框）。非常感谢。

div{
    height:50px;
    width:50px;
    position:relative;
    overflow:hidden;
}
div:after{
    height:100%;
    width:100%;
    position:relative;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    content:'';
    display:block;
    position:absolute;
    left:-75%;
    background-image:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);
    background-size:cover;
}