CSS triangle :before element

I’m using bootstrap, trying to make a div have a CSS triangle before it.

http://jsfiddle.net/B2XvZ/11/

Here is my non-working code:

.d:before {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #dd4397 transparent transparent;
}

The way I’d like it to look is for there to be a pink left-pointing triangle right before the text “this”, with no gap between it and the div. I’ve tried to do this by floating the elements also, with no success.


solution

You need to specify the content property.

For positioning, add position:relative to the parent, and then absolutely position the arrow -15px to the left.

jsFiddle example

.d { position:relative; }
.d:before {
  content:"\A";
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #dd4397 transparent transparent;
  position: absolute;
  left: -15px;
}