Div底部的中心三角形

Question

我正在嘗試在英雄的底部放置一個三角形/箭頭，但它沒有響應，並且不能很好地在移動設備上工作，因為三角形向右浮動且不再絕對居中。

如何始終將三角形保持在div底部的絕對中心？

示例代碼在這里：

http://jsfiddle.net/SxKr5/1/

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

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

Answer 2

您可以使用以下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> 

Answer 3

檢查一下：

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

Answer 4

您也可以使用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;
}

Answer 5

我知道這不是您問題的直接答案，但是您也可以考慮使用clip-path，例如以下問題： https : //stackoverflow.com/a/18208889/23341 。