title: Div with double arrow on top and bottom
body: <p>I'm not an expert with CSS and I'm gonna be struggled in order to achieve the following shape for my div:</p>
  
  <p><a href="https://i.stack.imgur.com/XmvJ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XmvJ1.png" alt="enter image description here"></a></p>
  
  <p>And then I would like to insert text in the center.</p>
  
  <p>How can I obtain this shape ?</p>
  
  <p>Below here, some my attempts:</p>
  
  <pre><code> &lt;div class="triangle-down-white" style="height:400px;"&gt; 
                      try
                  &lt;/div&gt;
  </code></pre>
  
  <p>and css</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>UPDATE</strong>
  I added the new style chevron but the text appear behind the div. I'm using bootstrap and the html code is the following:</p>
  
  <pre><code>&lt;div class="row"&gt; 
                  &lt;div class="col-sm-12" id="chevron"&gt;
                  &lt;p&gt;asdasdasdasasdaasdsadasadsadsasd&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>The rest of the code is completely the standard one for bootstrap.</p>
  
  <p><strong>SOLVED</strong></p>
  
  <p>I added z-index: -1 at the new element.</p>