html - 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

次の 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 2

これはあなたの質問に対する直接的な回答ではないことは承知していますが、次の質問のようにクリップパスの使用を検討することもできます: https://stackoverflow.com/a/18208889/23341。