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

我希望它的样子是在文本"this"之前有一个粉红色的左指三角形,它与div之间没有间隙.我试图通过浮动元素来做到这一点,但没有成功.

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

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