Cómo hacer un triángulo css puro que tiene un centro blanco

Quiero crear una flecha hacia arriba y hacia abajo con CSS como el siguiente: http://apps.eky.hk/css-triangle-generator/

Sin embargo, en lugar de un color sólido, quiero configurarlo para que el interior sea blanco y solo haya un borde alrededor del triángulo. (Entonces el triángulo sería multicolor, un color en el interior y un borde de diferente color).

¿Es esto posible? De ser así, ¿cómo se puede hacer?

Para crear triangularjs con solo CSS usamos un elemento de ancho / altura cero con bordes:

.arrow-up { width : 0; height : 0; border-left : 50px solid transparent; border-right : 50px solid transparent; border-bottom : 50px solid black; } 

Dado que estamos utilizando bordes para crear la flecha, no podemos simplemente darle un borde, pero podemos superponer una flecha sobre una flecha ligeramente más grande para hacer la apariencia de un borde:

HTML –

 

CSS –

 .top { position : absolute; top : 6px; left : 10px; width : 0; height : 0; z-index : 100; border-left : 50px solid transparent; border-right : 50px solid transparent; border-bottom : 50px solid black; } .bottom { position : absolute; width : 0; height : 0; z-index : 99; border-left : 60px solid transparent; border-right : 60px solid transparent; border-bottom : 60px solid red; }​ 

Aquí hay una demostración: http://jsfiddle.net/jasper/qnmpb/1/

Actualizar

Luego puede colocar los elementos DIV triangulares dentro de un contenedor y mover el contenedor como desee:

HTML –

 

CSS –

 #container { position : relative; top : 25px; left : 25px; } 

Aquí hay una demostración: http://jsfiddle.net/jasper/qnmpb/3/

EDITAR (2014):

Acabo de volver a esta respuesta y me di cuenta de que los elementos HTML separados no son necesarios para crear su doble triángulo. Puede usar pseudoelementos,: :before y :after . Es decir, reemplace el selector .top con algo como .my-element-that-needs-a-triangle:before y the .bottom selector con algo como .my-element-that-needs-a-triangle:after .

Creo que se puede hacer una buena idea de qué hacer consultando este tutorial sobre burbujas de pensamiento css puro. Está haciendo lo que estás buscando.

http://www.sitepoint.com/pure-css3-speech-bubbles/

Dependiendo de cómo lo esté usando, puede hacer un triángulo, con un borde e incluso una sombra de cuadro, sin el corte de borde triangular, usando la transform: rotate() CSS transform: rotate() . Ver mi respuesta aquí: https://stackoverflow.com/a/8867645/918414

Si desea crear un triángulo con bordes (o sombreado de cuadro similar) en CSS puro, debe usar pseudoelementos :before y :after .

En mi ejemplo, agregué display:inline-block; al elemento .arrow-dropdown para poder crear algún tipo de menú desplegable con una sombra .arrow-dropdown . Le sigue .arrow-only que es un triángulo básico con un borde rojo.

 body { margin: 10px; background: #1670c4; } .text { display: inline-block; font-size: 15px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); cursor: default; } .arrow-dropdown { display: inline-block; position: relative; vertical-align: middle; margin: 1px 0 0 8px; width: 8px; height: 7px; } .arrow-dropdown:after { content: ''; position: absolute; border-style: solid; border-width: 7px 4px 0; border-color: #fff transparent transparent transparent; display: block; width: 0; z-index: 1; } .arrow-dropdown:before { content: ''; position: absolute; border-style: solid; border-width: 8px 5px 0; border-color: rgba(0,0,0,0.3) transparent transparent transparent; display: block; width: 0; z-index: 0; } .arrow-only { position: relative; vertical-align: middle; margin: 10px 0 0 8px; width: 8px; height: 7px; } .arrow-only:after { content: ''; position: absolute; border-style: solid; border-width: 12px 9px 0; border-color: #fff transparent transparent transparent; display: block; width: 0; z-index: 1; } .arrow-only:before { content: ''; position: absolute; border-style: solid; border-width: 15px 11px 0; border-color: #f00 transparent transparent transparent; display: block; width: 0; z-index: 0; margin:-1px 0 0 -2px; } 
 
Dropdown text