Question

我需要创建一个带三角形的按钮（如 http://css-tricks.com/triangle-breadcrumbs/ ），带有线性垂直渐变和边框，我想使用纯CSS3。如果我需要45度的“三角形”，那就没关系，我只是写这样的smth

.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

是的，只能使用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

看到

Answer 3

我希望这会帮助你我只用一个纯css的div制作渐变三角形。

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

<强>已更新

立即检查它的工作情况： - http://jsfiddle.net/NDJ3S/17/

Answer 4

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

transform: scaleY(0.5)

示例：

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

编辑：添加translateZ(0)以强制在webkit中进行GPU渲染（消除锯齿边框，mhmmmm！）

使用线性渐变制作CSS3三角形

4 个答案: