Div with double arrow top and bottom

Question

I am not an expert in CSS, and I'm going to fight to get the following form for my div:

And then I would like to insert the text in the center.

How can I get this form?

Below are some of my attempts:

<div class="triangle-down-white" style="height:400px;"> try </div> 

and 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 I added a new chevron style, but the text appeared behind the div. I am using bootstrap and the html code is as follows:

 <div class="row"> <div class="col-sm-12" id="chevron"> <p>asdasdasdasasdaasdsadasadsadsasd</p> </div> </div> 

The rest of the code is completely standard for bootstrapping.

solvable

I added z-index: -1 to the new element.

Answer 1

Taken from this website here you need a chevron shape:

 #chevron { position: relative; text-align: center; padding: 12px; margin-bottom: 6px; height: 60px; width: 200px; } #chevron:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 51%; background: red; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg); } #chevron:after { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: red; -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); } p{ position: relative; z-index: 1; } 

 <div id="chevron"><p>Hello</p></div>