Quero adicionar um rótulo em alguns dos meus elementos em um site e criar um rótulo que seja uma bandeira com um corte em forma de V invertido na parte inferior.

Até agora eu tenho o seguinte:

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/

No entanto, preciso que o plano de fundo seja branco e contorne essa forma em roxo e 1px. Eu estava tentando encaixar a mesma forma apenas em branco dentro desta, mas tudo ficou confuso e não saiu como o esperado.

Talvez seja uma abordagem errada, mas quero acabar com rótulos que se pareceriam com isso: