title: how can i create a div shape like the one i have shared with 100% width
body: <p><img src="https://i.stack.imgur.com/i8PG2.jpg" alt="enter image description here"></p>
  
  <p>I want create a <code>div</code> with a shape as shown above and I want it to be 100% width.</p>
  
  <p>Below is the HTML and CSS that I tried.
  I was able to make a triangle but it doesn't work with 100% width of <code>div</code>:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="triangle-up"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.triangle-up {
      width: 25%;
      height: 0;
      padding-left:25%;
      padding-bottom: 25%;
      overflow: hidden;
  }
  .triangle-up div {
      width: 0;
      height: 0;
      margin-left:-500px;
      border-left: 500px solid transparent;
      border-right: 500px solid transparent;
      border-bottom: 500px solid #4679BD;
  }
  </code></pre>