使用线性梯度CSS3三角形(Make CSS3 triangle with linear gradi

我需要在一侧上（这样http://css-tricks.com/triangle-breadcrumbs/）与线性垂直梯度和边界与三角形创建按钮，我想使用纯CSS3。这没关系，如果我需要45deg“三角形”，我只是写水木清华这样的

.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股利。

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

更新

检查它现在它的工作： - http://jsfiddle.net/NDJ3S/17/

Answer 2:

所以，我知道你想用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 3:

是的，它可以只使用CSS梯度来完成。你只需要放三个梯度在另一个的顶部（记住， 第一个你名单上顶部的一个 ）。底部的一个（最后一个上市）是你的垂直梯度。在它的上面，你有两个梯度，这也使得用色停止的。

事情是这样的：

background: linear-gradient(30deg, transparent 37%, #fff 37%), 
            linear-gradient(-30deg, transparent 37%, #fff 37%), 
            linear-gradient(to bottom, #ccc, #000);

我做了一个小的演示，可以在可以看到： http://dabblet.com/gist/2705739