如何在不使用边框和图像的情况下在 div 上制作 CSS 三角形背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23362157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a CSS triangle background on a div without using border and image?
提问by user3584839
I know how to create triangles with CSS with borders and using images, but in my case, I'd like to use background color.
我知道如何使用带有边框和图像的 CSS 创建三角形，但就我而言，我想使用背景颜色。
I want something like this image.
我想要这样的图像。
Can anyone help me?
谁能帮我？
回答by Lorenzo
An alternative is to use background linear gradient. The trick is to set the direction to bottom right, set the first range as white (or transparent) and the second range as the color you want to triangle to be.
另一种方法是使用背景线性渐变。诀窍是将方向设置为右下角，将第一个范围设置为白色（或透明），将第二个范围设置为您想要三角形的颜色。
In the following example the first half of background is white (from 0% to 50%) and the second half (from 50% to 100%) golden yellow.
在下面的例子中，背景的前半部分是白色（从 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>Please note that this property is supported only by modern browsers (IE 11+, FF 49+)
请注意，此属性仅受现代浏览器（IE 11+、FF 49+）支持
回答by SW4
The problem with creating triangles using CSS borders is their inflexibility when it comes to styling. As such, you can use a relatively fully pseudo fledged element instead, providing many more styling options:
使用 CSS 边框创建三角形的问题在于它们在样式方面的不灵活性。因此，您可以使用相对完整的伪成熟元素来代替，提供更多样式选项：
Sure, you can do, e.g.:
当然，你可以这样做，例如：
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;
}
回答by Jaime Montoya
Try this tool to generate the shape you want: https://bennettfeely.com/clippy/. Then tweak the code according to your needs. For example, this is how you can get a triangle:
试试这个工具来生成你想要的形状：https: //bennettfeely.com/clippy/。然后根据您的需要调整代码。例如，这是获得三角形的方法：
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-webkit-clip-path: 多边形(50% 0%, 0% 100%, 100% 100%); 剪辑路径：多边形（50% 0%、0% 100%、100% 100%）；
Support, however, is not the best as it's only fully supported in Firefox and non-existant in Edge/IE and therefore discouraged to use on production websites Clip path support
但是，Support并不是最好的，因为它仅在 Firefox 中得到完全支持，在 Edge/IE 中不存在，因此不鼓励在生产网站上使用剪辑路径支持
