Quiero agregar una etiqueta en algunos de mis elementos en un sitio web y diseñar una etiqueta que sea una bandera con un corte invertido en forma de V en la parte inferior.

Hasta ahora tengo esto:

HTML

<div class="css-shapes"></div>

CSS

.css-shapes{
    border-left: 99px solid #f00fff;
    border-right: 99px solid #f00fff;
    border-bottom: 39px solid transparent;
}

http://jsfiddle.net/yhexkm4u/2/

Sin embargo, necesito que el fondo sea blanco y el borde alrededor de esta forma en púrpura y 1px. Estaba tratando de ajustar la misma forma solo en blanco dentro de este, pero todo se volvió desordenado y no salió como se esperaba.

Tal vez es un enfoque incorrecto, pero quiero terminar con etiquetas que se verían así: