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

Question

我知道如何用带边框和使用图像的CSS创建三角形，但就我而言，我想使用背景颜色。

我想要这样的图像。

任何人都可以帮助我吗？

Answer 1

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

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

.triangle {
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #a48d01 50%, #a48d01 100%);
}

<div class="triangle"></div>

请注意，此属性仅受现代浏览器（IE 11 +，FF 49 +）

支持

Answer 2

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

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

Demo Fiddle

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

Answer 3

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

  

-webkit-clip-path：polygon（50％0％，0％100％，100％100％）;   clip-path：polygon（50％0％，0％100％，100％100％）;

然而，

支持并不是最好的，因为它仅在Firefox中完全支持且在Edge / IE中不存在，因此不鼓励在生产网站https://bennettfeely.com/clippy/上使用