Faire CSS3 triangle avec un dégradé linéaire

J'ai besoin de créer un bouton avec un triangle sur le côté (comme cette http://css-tricks.com/triangle-breadcrumbs/) avec linear gradient vertical et de la frontière, et je veux l'utiliser pure CSS3.
C'est ok si j'ai besoin de 45deg "triangle", je viens d'écrire qch comme ça

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

et masquer la moitié de ce pseudo-élément .bouton (alors que l'autre moitié est visible, comme un triangle).

Mais si j'ai besoin d'un autre angle (par exemple, plus raide) - je ne peux pas le faire avec standart XY rotation et échelle. Je peux utiliser, par exemple, 2 divs, un pour la moitié supérieure du triangle, et un pour le fond, mais il pourrait y avoir un problème avec bordure et dégradé.

C'est peut-être possible de le faire avec plusieurs dégradés avec les arrêts de couleur?

InformationsquelleAutor Wayne | 2012-05-14
  1. 3

    J'espère que cela va vous aider, j'ai fait gradient de triangle avec un seul div avec du pur css.

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

    Mis à JOUR

    Vérifier maintenant son travail :- http://jsfiddle.net/NDJ3S/17/

    InformationsquelleAutor Shailender Arora
  2. 7

    Donc, je sais que vous voulez le faire avec du CSS, mais j'ai toujours le faire en 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>

    Vous pouvez l'intégrer de la manière suivante:

    <img src="triangle.svg" alt="Triangle" class="triangle" />

    Vous pouvez également en faire la bascule de l'image de la même manière, et de l'activer à l'aide de JavaScript ou jQuery:

    $(".triangle").click(function()
{
    if($(this).attr("src") == "triangle.svg")
        $(this).attr("src", "triangledown.svg");

    else $(this).attr("src", "triangle.svg");
});
    • Je sais au sujet de SVG, mais je me demande encore aujourd'hui si il ya une autre façon (CSS)
    • Mon seul souci avec l'aide de CSS, c'est que la frontière-propriétés de l'image n'est pas compatible avec IE9.
    InformationsquelleAutor James Wright
  3. 5

    Oui, il peut être fait en utilisant uniquement CSS dégradés. Vous avez juste à mettre trois gradients sur le dessus de l'autre (gardez à l'esprit que le premier de la liste est celui sur le dessus). Celui du bas (la dernière de la liste) est votre dégradé vertical. Sur le dessus de cela, vous avez deux gradients qui utilisent eux aussi des arrêts de couleur.

    Quelque chose comme ceci:

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

    J'ai fait une petite démo qui peut être vu à: http://dabblet.com/gist/2705739

    InformationsquelleAutor Ana
  4. 0

    Avez-vous vérifié le css transformer scaleY?
    Avec un autre élément autour de la flèche (ou peut-être un pseudo-élément), il vous permet de redimensionner le résultat.

    transform: scaleY(0.5)

    Exemple:

    http://jsfiddle.net/xaddict/hJyrU/ (webkit-seul exemple)

    EDIT: ajouté translateZ(0) pour forcer le rendu GPU dans webkit (anti-aliasing frontières, mhmmmm!)

    InformationsquelleAutor xaddict