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

Я использую начальную загрузку, пытаясь сделать 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. Я пытался сделать это, плавая элементы, но безуспешно.

Источник

4 ответа

Решение

Вам необходимо указать 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;
}
Источник

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

.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;
}
Источник

Вы можете использовать геометрические фигуры UTF-8.

      a:before {
  content: '\25B2'
}

в вашем HTML нужна мета-кодировка:

      <html>
<head>
<meta charset="utf-8" /> 
...
</head>
</html>

Список геометрических фигур:https://www.w3schools.com/charsets/ref_utf_geometric.asp

Источник 
a:after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0px 15px;
border-color: #fff transparent transparent transparent;
display: inline-block;
vertical-align: middle;
position: absolute;
bottom: -13px;
left: 0;
right: 0;
margin: 0 auto;

}

Источник
Другие вопросы по тегам