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

I've had a go at updating your CSS to create the effect you want:

.css-shapes {
  height: 250px;
  width: 0px;
  border-left: 99px solid #f00fff;
  border-right: 99px solid #f00fff;
  border-bottom: 39px solid transparent;
  position: relative
}
.n-shape {
  height: 248px;
  width: 0px;
  border-left: 95px solid #ffffff;
  border-right: 95px solid #ffffff;
  border-bottom: 39px solid transparent;
  position: absolute;
  top: -6px;
  right: -95px;
}
.top {
  position: absolute;
  top: 0px;
  width: 198px;
  height: 2px;
  background-color: #f00fff;
  left: -99px;
  border-bottom: 1px solid #f00fff;
}

Fiddle: http://jsfiddle.net/dywhjwna/