title: Create bottom responsive arrow
body: <p>I need to create grid with a down arrow. See the image below:</p>
  
  <p><img src="https://i.imgur.com/roMgO24.png" alt="example"></p>
  
  <p>The problem is that the div has a variable width because of <code>.col-xs-3</code>. How can I give the arrow (<code>:after</code> element) the appropriate width so that it will still be responsive?</p>
  
  <p><strong>My CSS</strong>:</p>
  
  <pre class="lang-css prettyprint-override"><code>.grid-arrow::after {
      content: " ";
      display: block;
      width: 0;
      height: 0;
      border-top: 47px solid transparent;
      border-bottom: 47px solid transparent;
      border-left: 40px solid rgb(173, 173, 173);
      position: absolute;
      /* top: 50%; */
      margin-top: -37px;
      /* margin-left: 1px; */
      left: 50%;
      z-index: 3;
      -webkit-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
              transform: rotate(90deg);
  }
  </code></pre>
  
  <p><strong>My HTML</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-xs-3 advantage grid-arrow"&gt;
      &lt;div&gt;
          Some text
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>