html 置顶箭头,css – 顶部和底部带有双箭头的Div

我不是CSS的专家,为了达到我的div的以下形状,我会挣扎：

然后我想在中心插入文字.

我怎样才能获得这种形状？

在这下面,我的一些尝试：

try

和css

.triangle-down-white {

width: 100%;

height: 0;

padding-left:50%;

padding-top: 4%;

overflow: hidden;

background: rgba(140, 140, 140, 0.33);

}

.triangle-down-white:before,

.triangle-down-white:after {

content: "";

display: block;

height: 122px;

width: 122px;

margin-left:-1000px;

border-left: 1000px solid transparent;

border-right: 1000px solid transparent;

border-top: 100px solid rgba(140, 140, 140, 0.33);

}

.triangle-down-white:before

{ /* hide arrow tails background */

border-top: 100px solid white;

}

UPDATE

我添加了新款雪佛龙,但文字出现在div后面.我正在使用bootstrap,html代码如下：

asdasdasdasasdaasdsadasadsadsasd

其余的代码完全是bootstrap的标准代码.

解决了

我在新元素中添加了z-index：-1.