Search code examples
htmlcsscss-shapes

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;
}