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

Question

Я использую 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; 
} 

Как я хотел бы, чтобы посмотреть это там быть розовый левый-треугольник, указывающий прямо перед текстом «это », без разрыва между ним и div. Я попытался сделать это, плавая также и без каких-либо успехов.

Answer 1

Вы должны указать content свойство.

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

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

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