CSS-треугольник: перед элементом

Я использую bootstrap, пытаясь сделать div, перед которым есть треугольник CSS.

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

Вот мой нерабочий код:

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

То, как я хотел бы это посмотреть, - это иметь розовый треугольник слева перед текстом "this", без разрыва между ним и div. Я попытался сделать это, плавая также и без каких-либо успехов.

ОТВЕТЫ

Ответ 1

Вам нужно указать свойство content.

Для позиционирования добавьте position:relative к родительскому элементу, а затем полностью поместите стрелку -15px влево.

Пример jsFiddle

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

Ответ 2

Вам нужно свойство содержимого и некоторые другие

.d:before {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #dd4397 transparent transparent;  
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}