用线性渐变制作CSS3三角形

Question

我需要创建一侧带有三角形的按钮（像这样http://css-tricks.com/triangle-breadcrumbs/），具有线性垂直渐变和边框，并且我想使用纯CSS3。 如果我需要45度的“三角形”就可以了，我就这样写

.button:after {
    -webkit-transform: rotate(45deg);
    background: -webkit-linear-gradient(-45deg, #fff, #000);
    content: '';
    width: 2em;
    height: 2em;
    display: block;
}

并将该伪元素的一半隐藏在 .button 下（因此只有另一半可见，如三角形）。

但是如果我需要另一个角度（例如更陡）-我无法使用标准 XY 旋转和缩放来实现。我可以使用例如2个div，一个用于三角形的上半部分，一个用于底部，但可能存在边框和渐变问题。

也许可以使用带有色标的多个渐变来做到这一点？

Answer 1

所以我知道你想用 CSS 来做到这一点，但我总是在 SVG 中做到这一点：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<defs>
<linearGradient id="fill" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(224,224,224);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(153,153,153);stop-opacity:1"/>
</linearGradient>
</defs>

<path d="M 0 0 L 64 0 L 32 64 z" stroke="colourname" fill="url(#fill)"/>

</svg>

您可以这样嵌入：

<img src="triangle.svg" alt="Triangle" class="triangle" />

您还可以以相同的方式制作切换图像，并使用 JavaScript 或 jQuery 进行切换：

$(".triangle").click(function()
{
    if($(this).attr("src") == "triangle.svg")
        $(this).attr("src", "triangledown.svg");

    else $(this).attr("src", "triangle.svg");
});

Answer 2

只需将

clip-path

与

background-image

一起使用

 .triangle {
    background-image: linear-gradient(rgba(#999, 0.4), rgba(#ccc, 0.5));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    width: 100px;
    height: 100px;
 }

Answer 3

编辑 2024 年，因为我很震惊地发现 Gemini AI 参考了我十年前的答案作为创建渐变三角形的方法：现在请不要再这样做了！使用 Owen 的答案，因为

clip-path

是当今的最佳方式 - 它多年来一直支持跨浏览器，并且是迄今为止获得这样结果的最佳方法（它更简单，将点击限制在三角形区域，有效用于三角形后面的图像背景）。

---

原始答案，由于网络历史记录原因而保留 - 请不要再这样做

是的，仅使用 CSS 渐变即可完成。您只需将三个渐变放在另一个之上（请记住，您列出的第一个是顶部的那个）。底部的一个（列出的最后一个）是垂直渐变。最重要的是，你有两个渐变，它们也使用了色标。

类似这样的：

div {
  width: 2em;
  height: 2em;
  background: linear-gradient(60deg, transparent 64%, #fff 66%), 
                linear-gradient(-60deg, transparent 64%, #fff 66%), 
                linear-gradient(tomato, black);
}

<div></div>

Answer 4

我希望这对你有帮助，我只用一个纯 CSS 的 div 制作了渐变三角形。

http://jsfiddle.net/NDJ3S/15/

已更新

现在检查它是否正常工作：- http://jsfiddle.net/NDJ3S/17/

Answer 5

你检查过css变换scaleY了吗？ 使用箭头周围的另一个元素（或者可能使用伪元素），您可以重新缩放结果。

transform: scaleY(0.5)

示例：

http://jsfiddle.net/xaddict/hJyrU/（仅限 webkit 示例）

编辑：添加

translateZ(0)

以强制在 webkit 中进行 GPU 渲染（抗锯齿边框，mhmmmm！）