css中间底部,css – 分部底部的中心三角形

我试图在我的英雄底部有一个三角形/箭头，但它不响应，不能在移动上工作，因为三角形漂浮在右边，并不是绝对居中了。

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

示例代码：

HTML：

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;

}