使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格，一個用於三角形的上半部，一個用於底部，但是邊界和漸變可能存在問題。

也許可以使用帶有色標的多個漸變來做到這一點？

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！）