CSS-Dreieck: vor Element

Question

Ich benutze Bootstrap, versuchen, ein Div ein CSS-Dreieck vor haben.

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

Hier ist mein nicht-funktionierenden Code:

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

So wie ich es für dort suchen mag, ist ein rosa links weisende Dreieck rechts vor dem Text „, dies zu sein ", ohne Lücke zwischen ihm und dem div. Ich habe versucht, dies zu tun, indem ich die Elemente auch ohne Erfolg schweben lasse.

Answer 1

Sie müssen die content Eigenschaft angeben.

Fügen Sie zur Positionierung position:relative zum übergeordneten Element hinzu, und positionieren Sie dann den Pfeil -15px absolut nach links.

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

Sie benötigen Inhalt Eigentum und einige andere

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