div底部的中心三角形答案

【问题标题】：Center Triangle at Bottom of Divdiv底部的中心三角形
【发布时间】：2013-11-12 04:45:53
【问题描述】：

我试图在我的英雄底部有一个三角形/箭头，但它没有响应，并且在移动设备上不能很好地工作，因为三角形向右浮动并且不再绝对居中。

如何让三角形始终位于 div 底部的绝对中心？

此处的示例代码：

HTML：

<div class="hero"></div>

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

【问题讨论】：

@PKHunter 检查我的答案，我也为微软设置了 IE 过滤器。
只需使用left: calc(50% - 50px)。您可以删除负左边距。

标签： html css css-shapes

【解决方案1】：

您不能将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;
}

或者如果您需要可变宽度，您可以使用：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;
}

【讨论】：

【解决方案2】：

检查一下：

http://jsfiddle.net/SxKr5/3/

.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')
}

【讨论】：

【解决方案3】：

您可以使用以下 css 使元素居中对齐，样式为 position: absolute：

.element {
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
}

如果 CSS 只有left: 50%，我们将产生以下效果：

在将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>

【讨论】：

不错的解决方案。在 IE11 上工作:)
位置：绝对要求使得大多数框架中的工具提示之类的东西有点困难。但是感谢您的想法！

【解决方案4】：

您还可以使用 CSS“计算”来获得相同的效果，而不是使用负边距或变换属性（以防您想将这些属性用于其他任何事情）。

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

【讨论】：

【解决方案5】：

我知道这不是您问题的直接答案，但您也可以考虑使用剪辑路径，如以下问题：https://stackoverflow.com/a/18208889/23341。

【讨论】：