Hacer triángulo CSS3 con degradado lineal

Necesito crear un botón con un triángulo en un lado (como este http://css-tricks.com/triangle-breadcrumbs/) con degradado y borde vertical lineal, y quiero usa CSS3 puro Está bien si necesito 45 grados "triángulo", sólo escribo algo bajo como estoHacer triángulo CSS3 con degradado lineal

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

y ocultar la mitad de esa pseudo-elemento bajo .button (por lo que sólo otra mitad de ella es visible, como un triángulo).

Pero si necesito otro ángulo (por ejemplo, más pronunciado) - No puedo hacerlo con el estándar XY rotar y escalar. Puedo usar, p. 2 divs, uno para la mitad superior del triángulo y otro para la parte inferior, pero puede haber un problema con el borde y el degradado.

Tal vez es posible hacer eso con múltiples degradados con paradas de color?

Fuente

2012-05-14 Wayne

espero que esto le ayudará a que he hecho graduado triángulo con solo una div con css puro.

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

ACTUALIZADO

Compruebe ahora su trabajo: - http://jsfiddle.net/NDJ3S/17/

Fuente

2012-05-14 10:39:53

No funciona en Chrome. –

@JamesWright: compruebe ahora: - http://jsfiddle.net/NDJ3S/17/ –

Ahora está funcionando :) –

así que sé que usted quiere hacer esto con CSS, pero siempre hago esto 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>

puede incrustar como así:

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

También puede hacer que el imagen de alternancia de la misma manera, y alternar usando JavaScript o jQuery:

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

    else $(this).attr("src", "triangle.svg"); 
});

Fuente

2012-05-14 09:45:09

Sé acerca de SVG, pero todavía me pregunto si hay otra forma (CSS) – Wayne

Mi única preocupación con el uso de CSS es que la propiedad border-image no es compatible con IE9. –

Sí, se puede hacer utilizando sólo gradientes CSS. Solo tiene que poner tres degradados encima del otro (tenga en cuenta que el primero que enumera es el que está en la parte superior). El que está en la parte inferior (el último en la lista) es su gradiente vertical. Además, tienes dos degradados que también usan las paradas de color.

Algo como esto:

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

He hecho una pequeña demostración que se puede ver en: http://dabblet.com/gist/2705739

Fuente

2012-05-15 23:08:24 Ana

Ha comprobado el css transformar scaleY? Con otro elemento alrededor de la flecha (o quizás con un pseudo elemento), le permite cambiar el resultado.

transform: scaleY(0.5)

Ejemplo:

http://jsfiddle.net/xaddict/hJyrU/ (ejemplo webkit-only)

EDIT: añadido translateZ(0) para forzar procesamiento de GPU en webkit (bordes suavizados, mhmmmm!)

Fuente

2013-03-06 09:08:31 xaddict

Hacer triángulo CSS3 con degradado lineal

Respuesta

Cuestiones relacionadas