Html CSS 三角形 :before 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20589780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS triangle :before element
提问by amagumori
I'm using bootstrap, trying to make a div have a CSS triangle before it.
我正在使用引导程序，试图让一个 div 在它之前有一个 CSS 三角形。
Here is my non-working code:
这是我的非工作代码：
.d:before {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #dd4397 transparent transparent;
}
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.
我希望它看起来的方式是在文本“this”之前有一个粉红色的左指三角形，它与 div 之间没有间隙。我也尝试通过浮动元素来做到这一点，但没有成功。
回答by Josh Crozier
You need to specify the contentproperty.
您需要指定content属性。
For positioning, add position:relativeto the parent, and then absolutely position the arrow -15pxto the left.
对于定位，添加position:relative到父级，然后将箭头绝对定位-15px到左侧。
.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;
}
回答by Slawa Eremkin
You need content property and some other
您需要内容属性和其他一些
.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;
}
回答by Adam Colton
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;
}
}
