7

片側に三角形のボタン (この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 回転とスケーリングでは作成できません。たとえば、三角形の上半分に 1 つ、下半分に 1 つの 2 つの div を使用できますが、境界線とグラデーションに問題がある可能性があります。

カラーストップのある複数のグラデーションでそれを行うことは可能でしょうか?

4

5 に答える 5

9

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");
});
于 2012-05-14T09:45:09.927 に答える
7

はい、CSS グラデーションのみを使用して実行できます。他のグラデーションの上に 3 つのグラデーションを配置するだけです (最初にリストしたものが一番上にあることに注意してください)。一番下にあるもの (最後にリストされているもの) は、垂直方向のグラデーションです。その上に、カラー ストップを使用する 2 つのグラデーションがあります。

このようなもの：

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で見ることができる小さなデモを作成しました。

于 2012-05-15T23:08:24.080 に答える
0

css 変換の scaleY を確認しましたか? 矢印の周りに別の要素 (またはおそらく疑似要素) を使用すると、結果を再スケーリングできます。

transform: scaleY(0.5)

例：

http://jsfiddle.net/xaddict/hJyrU/ (Webkit のみの例)

編集: translateZ(0)Webkit で GPU レンダリングを強制するために追加されました (アンチエイリアス境界線、うーん!)

于 2013-03-06T09:08:31.027 に答える