Triangle CSS: avant l'élément

Question

J'utilise bootstrap, essayant de faire un div CSS avoir un triangle CSS avant.

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

Voici mon code non fonctionnel:

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

La façon dont j'aimerais qu'il ressemble, c'est qu'il y ait un triangle rose pointant vers la gauche juste avant le texte "ceci", sans écart entre lui et le div. J'ai essayé de le faire en flottant également les éléments, sans succès.

Answer 1

Vous devez spécifier la propriété content.

Pour le positionnement, ajoutez position:relative au parent, puis positionnez absolument la flèche -15px à gauche.

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

Answer 2

Vous avez besoin d'une propriété de contenu et d'autres

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