Сделать CSS3 треугольник с линейным градиентом

Мне нужно создать кнопку с треугольником на одной стороне (например,http://css-tricks.com/triangle-breadcrumbs/) с линейным вертикальным градиентом и границей, и я хочу использовать чистый CSS3. Это нормально, если мне нужно 45deg "треугольник", я просто пишу smth, как это

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

и скрыть половину этого псевдо-элемента .кнопка (так что видна только другая ее половина, как треугольник).

а если мне нужен другой угол (например, более крутой) - я не могу сделать это с стандартный XY поворот и масштабирование. Я могу использовать, например, 2 divs, один для верхней половины треугольника и один для нижней, но может возникнуть проблема с границей и градиентом.

может быть, это можно сделать с несколькими градиентами с остановками цвета?

6
css css-shapes css-transforms css3

4 ответов

Я надеюсь, что это поможет вам, я сделал градиентный треугольник только с одним div с чистым css.

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

обновлено

Проверьте теперь его работу : -http://jsfiddle.net/NDJ3S/17/

3

поэтому я знаю, что вы хотите сделать это с 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");
});
6

Да, это можно сделать, используя только 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

5

вы проверили масштаб преобразования css? С другим элементом вокруг стрелки (или, возможно, с псевдо-элементом) он позволяет масштабировать результат.

transform: scaleY(0.5)

пример:

http://jsfiddle.net/xaddict/hJyrU/ (webkit-только пример)

EDIT: добавлено translateZ(0) для принудительного рендеринга GPU в webkit (сглаживание границ, mhmmmm!)

0