CSS 如何使用::after定位CSS三角形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25065661/
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
How to position a CSS triangle using ::after?
提问by Damien Morvan
I've created a div with a bottom arrow using ::after. Here is the HTML code:
我使用 ::after 创建了一个带有底部箭头的 div。这是 HTML 代码：
<div class="sidebar-resources-categories">Topics</div>
<div class="text-content">ok ok</div>
And here is the CSS:
这是CSS：
.sidebar-resources-categories{
height: 50px;
margin-bottom: 20px;
background-color: #e8e8e8;
font-weight: 600;
line-height: 50px;
text-align: center;
font-size: 20px;
}
.sidebar-resources-categories::after{
content: '';
position: absolute;
left: 42%;
top: 100%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #e8e8e8;
clear: both;
}
Here is the result:
结果如下：
I would like the arrow to be at the very bottom of the grey div. I don't want to have the content between the div and the bottom arrow. Do you know how I can do that?
我希望箭头位于灰色 div 的最底部。我不想在 div 和底部箭头之间有内容。你知道我怎么做吗？
采纳答案by Matthew Abrman
Just add position:relativeto .sidebar-resources-categories
只需添加position:relative到 .sidebar-resources-categories
http://jsfiddle.net/matthewabrman/5msuY/
http://jsfiddle.net/matthewabrman/5msuY/
explanation: the ::after elements position is based off of it's parent, in your example you probably had a parent element of the .sidebar-res... which had a set height, therefore it rendered just below it. Adding position relative to the .sidebar-res... makes the after elements move to 100% of it's parent which now becomes the .sidebar-res... because it's position is set to relative. I'm not sure how to explain it but it's expected behaviour.
解释： ::after 元素位置基于它的父元素，在你的例子中，你可能有一个 .sidebar-res... 的父元素，它有一个设定的高度，因此它呈现在它的正下方。添加相对于 .sidebar-res... 的位置使 after 元素移动到其父元素的 100%，现在成为 .sidebar-res... 因为它的位置设置为相对。我不确定如何解释它，但这是预期的行为。
read more on the subject: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
阅读有关该主题的更多信息：http: //css-tricks.com/absolute-positioning-inside-relative-positioning/
回答by Elow
Add a class:
添加一个类：
.com_box:after {
content: '';
position: absolute;
left: 18px;
top: 50px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
clear: both;
}
Updated your jsfiddle: http://jsfiddle.net/wrm4y8k6/8/
更新了你的 jsfiddle：http: //jsfiddle.net/wrm4y8k6/8/
回答by Ankit Patel
You can set triangle with position see this code for reference
您可以设置带位置的三角形，请参阅此代码以供参考
.top-left-corner {
width: 0px;
height: 0px;
border-top: 0px solid transparent;
border-bottom: 55px solid transparent;
border-left: 55px solid #289006;
position: absolute;
left: 0px;
top: 0px;
}
