Gradiente en border

[Lord_Sion_LSYK]

Quisiera saber si se puede hacer un gradiente en un border-left o parecido es decir, tengo lo siguiente:
HTML:

Código HTML:

<div id="triangulo5a"></div>
<div id="triangulo6a"></div>
<div id="triangulo7a"></div>
 

CSS:

Código CSS:

#triangulo5a {
width: 0;
height: 0;
border-left: 103px solid transparent;
border-right: 108px solid transparent;
border-bottom: 249px solid #1f7278;
position: absolute;
-webkit-transform: rotate(-124deg);
left: 112px;
top: 121px;
}
#triangulo7a {
width: 0;
height: 0;
border-left: 193px solid transparent;
border-right: 132px solid transparent;
border-bottom: 124px solid #0ca3e8;
position: absolute;
-webkit-transform: rotate(74deg);
left: 196px;
top: 164px;
}
#triangulo6a {
width: 0;
height: 0;
border-left: 28px solid transparent;
border-right: 111px solid transparent;
border-bottom: 266px solid #62faff;
position: absolute;
-webkit-transform: rotate(-78deg);
left: 163px;
top: 171px;
}
 

Esto debería de crear una especie de rombo en tres dimensiones.
Bueno...lo que quiero es cambiar el color de la cara superior izquierda (triangulo5a) y ponerle un gradiente radial. No se si se le puede poner directamente o que otra solución me pueden dar (si existe) que no implique "re dibujar" la figura.
Saludos.

[pzin]

Podrías combinar border-image y linear-gradient(), aunque no sé si te valdrá o no para lo que quieres hacer.

Si quieres hacer figuras más complejas como esas, casi mejor usar SVG o canvas.

[cesa_r]

Te dejo dos paginas sobre como hacer gradiente en borde:

http://www.desarrolloweb.com/articul...s-firefox.html
http://ascenddigital.blogspot.mx/201...nte-css-3.html

¡Espero se te aiga ayudado!