How to get 'div' shaped as a flag with CSS

Question

I want to add a label on some of my elements on a website and design for a label that is a flag with an inverted V-shaped cut at the bottom.

So far I have this:

Answer 1

Here is what I came up with.

Link Fiddle

It correspond to what you were looking for however I guess there should be a "better way" to it rather than playing with border.

HTML

    Text


    

    

CSS

#text-div {
    width: 118px;
    height: 60px;
    text-align: center;
    border: 1px solid purple;
    border-bottom: 0px;
    line-height: 60px;
}

#pacman { 
    width: 0px; 
    height: 0px;
    border-right: 60px solid purple; 
    border-top: 0px; 
    border-left: 60px solid purple; 
    border-bottom: 60px solid transparent;
}

#left-triangle{
    position: relative;
    left: -59px;
    border-right: 58px solid transparent; 
    border-top: 0px; 
    border-left: 58px solid white; 
    border-bottom: 58px solid transparent;
}
#right-triangle{
    position: relative;
    top: -59px;
    left: -57px;
    border-right: 58px solid white;
    border-top: 0px; 
    border-left: 58px solid transparent; 
    border-bottom: 58px solid transparent;
}