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.