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

Posted 2023-03-06

【中文标题】如何在不使用边框和图像的情况下在 div 上制作 CSS 三角形背景？ [复制]

【英文标题】：How to make a CSS triangle background on a div without using border and image? [duplicate]

【发布时间】：2014-06-15 05:50:09

【问题描述】：

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

我想要这张图片。

谁能帮帮我？

【问题讨论】：

css-tricks.com/snippets/css/css-triangle

这个“三角形”看起来如何？是多个三角形、重复的背景还是什么？

lea.verou.me/css3patterns/#half-rombes

不存在一个三角形和一些具有相同div的文本。

基本上你是在一个三角形的 div 之后（对吗）。如果是这样，那是不可能的。也许你对你所追求的有一个形象。

【参考方案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+）

【参考方案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;

【讨论】：

我想要背景颜色而不是背景图像。你有什么想法吗？

...只需设置背景颜色...??

我想在不使用边框和图像的情况下使用三角形背景颜色。我该怎么做？你还有什么想法吗？

以上作品-你试过改吗？将背景图像更改为背景颜色

@SW4 你知道如何改变角度让三角形变小吗？像 145º 度箭头？ （也不使用边框）。谢谢

【参考方案3】：

试试这个工具来生成你想要的形状：https://bennettfeely.com/clippy/。然后根据您的需要调整代码。例如，你可以这样得到一个三角形：

-webkit-clip-path: 多边形(50% 0%, 0% 100%, 100% 100%); 剪辑路径：多边形（50% 0%、0% 100%、100% 100%）；

但是，

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