Ich möchte einigen meiner Elemente auf einer Website eine Beschriftung hinzufügen und eine Beschriftung entwerfen, bei der es sich um eine Flagge mit einem umgekehrten V-förmigen Schnitt am unteren Rand handelt.

So weit ich das habe:

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

Allerdings muss der Hintergrund weiß sein und diese Form in lila und 1px umranden. Ich habe versucht, die gleiche Form nur in Weiß in dieses zu passen, aber alles wurde chaotisch und lief nicht wie erwartet.

Vielleicht ist es ein falscher Ansatz, aber ich möchte am Ende Labels haben, die ungefähr so aussehen: