Html Div 底部的中心三角形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19719048/
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
Center Triangle at Bottom of Div
提问by Miura-shi
I am trying to have a triangle/arrow at the bottom of my hero but it is not responsive and doesn't work on mobile very well as the triangle floats off to the right and is not absolutely centered anymore.
我试图在我的英雄底部有一个三角形/箭头，但它没有响应，并且在移动设备上不能很好地工作，因为三角形向右浮动并且不再绝对居中。
How could I keep the triangle positioned in the absolute center at the bottom of the div at all times?
如何始终将三角形定位在 div 底部的绝对中心？
Example code here:
示例代码在这里：
HTML:
HTML：
<div class="hero"></div>
CSS:
CSS：
.hero {
position:relative;
background-color:#e15915;
height:320px !important;
width:100% !important;
}
.hero:after,
.hero:after {
z-index: -1;
position: absolute;
top: 98.1%;
left: 70%;
margin-left: -25%;
content: '';
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
回答by Ben Hymanson
Can't you just set leftto 50%and then have margin-leftset to -25pxto account for it's width: http://jsfiddle.net/9AbYc/
你不能设置left为50%然后margin-left设置-25px为它的宽度：http: //jsfiddle.net/9AbYc/
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
or if you needed a variable width you could use: http://jsfiddle.net/9AbYc/1/
或者如果你需要一个可变宽度，你可以使用：http: //jsfiddle.net/9AbYc/1/
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
回答by Mohammad Usman
You can use following css to make an element middle aligned styled with position: absolute:
您可以使用以下 css 使元素居中对齐，样式为position: absolute：
.element {
transform: translateX(-50%);
position: absolute;
left: 50%;
}
With CSS having only left: 50%we will have following effect:
使用 CSS 只有left: 50%我们将具有以下效果：
While combining left: 50%with transform: translate(-50%)we will have following:
在left: 50%与结合时，transform: translate(-50%)我们将有以下内容：
.hero {
background-color: #e15915;
position: relative;
height: 320px;
width: 100%;
}
.hero:after {
border-right: solid 50px transparent;
border-left: solid 50px transparent;
border-top: solid 50px #e15915;
transform: translateX(-50%);
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 50%;
height: 0;
width: 0;
}<div class="hero">
</div>回答by Hasan Alaca
Check this:
检查这个：
.hero1
{
width: 90%;
height: 200px;
margin: auto;
background-color: #e15915;
}
.hero2
{
width: 0px;
height: 0px;
border-style: solid;
margin: auto;
border-width: 90px 58px 0 58px;
border-color: #e15915 transparent transparent transparent;
line-height: 0px;
_border-color: #e15915 #000000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')
}
回答by Josh Jennings
You could also use a CSS "calc" to get the same effect instead of using the negative margin or transform properties (in case you want to use those properties for anything else).
您还可以使用 CSS “calc” 来获得相同的效果，而不是使用负边距或转换属性（以防您想将这些属性用于其他用途）。
.hero:after,
.hero:after {
z-index: -1;
position: absolute;
top: 98.1%;
left: calc(50% - 25px);
content: '';
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
回答by Jonathan
I know this isn't a direct answer to your question, but you could also consider using clip-path, as in this question: https://stackoverflow.com/a/18208889/23341.
我知道这不是您问题的直接答案，但您也可以考虑使用剪辑路径，如本问题所示：https: //stackoverflow.com/a/18208889/23341。
