CSS三角形：在元素之前 [英] CSS triangle :before element

问题描述

我使用引导，试图让一个div有一个CSS三角形之前。

I'm using bootstrap, trying to make a div have a CSS triangle before it.

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之间没有间隙。我试图通过浮动元素也没有成功。

The way I'd like it to look is for there to be a pink left-pointing triangle right before the text "this", with no gap between it and the div. I've tried to do this by floating the elements also, with no success.

推荐答案

您需要指定 content 属性。

要定位，请将 position：relative 父项，然后将箭头 -15px 绝对定位。

For positioning, add position:relative to the parent, and then absolutely position the arrow -15px to the left.

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

这篇关于CSS三角形：在元素之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！