title: Text inside a pentagon shape pointing downwards using css
body: <p>I am trying to create a pentagon shape pointed downwards with a text inside it. There are some examples (<a href="https://stackoverflow.com/questions/49404544/how-to-make-background-div-inner-curved-using-html-css">How to make Background div inner curved using HTML, CSS?</a>, <a href="https://bennettfeely.com/clippy/" rel="nofollow noreferrer">Clippy-CSS clip-path maker</a> ) but those aren't the exact solution what I am looking for (see picture below). </p>
  
  <p>Any help would be greatly appreciated, and thanks.</p>
  
  <p><a href="https://i.stack.imgur.com/tkDhO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tkDhO.jpg" alt="enter image description here"></a></p>
  
  <p><strong>I resolved the issue:</strong></p>
  
  <p>I had not used <strong>::after</strong> pseudo-element before. The pseudo element inserts the content after the content of an element. The above output is derived using a box and downward triangle. </p>
  
  <pre><code>.card {
      margin: 15px;
      background: #ccc;
      position: relative;
  }
  
  .card:after {
      content: '';
      display: block;
      position: absolute;
      border-left: 350px solid transparent;
      border-right: 350px solid transparent;
      border-top: 40px solid #ccc;
      left: 1px;
  }
  
   &lt;div class="card"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;p&gt;Lorem Ipsum&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>