Я хочу добавить ярлык на некоторые из моих элементов на веб-сайте и оформить ярлык, представляющий собой флаг с перевернутым V-образным вырезом внизу.

Пока у меня есть это:

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/

Тем не менее, мне нужно, чтобы фон был белым и обводился вокруг этой фигуры фиолетовым и 1px. Я пытался вписать одну и ту же фигуру в белый, но все пошло не так, как хотелось.

Может быть, это неправильный подход, но я хочу закончить с ярлыками, которые будут выглядеть примерно так: