title: Trapeze with border
body: <p>I have created a trapeze using CSS.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="trapezeG"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.trapezeG {
    position: absolute;
    left: 214px;
    top: 120px;
    width: 1px;
    height: 70px;
    border: 1px solid #069;
    border-color: transparent transparent transparent #000000;
    border-width: 32px;
    transform: rotate(180deg);
  }
  </code></pre>
  
  <p>Here is my Fiddle : <a href="https://jsfiddle.net/sfck34y3/" rel="nofollow noreferrer">https://jsfiddle.net/sfck34y3/</a></p>
  
  <p>Here is the actual result :</p>
  
  <p><img src="https://i.stack.imgur.com/NlGgP.jpg" alt="CSS trapeze with border"></p>
  
  <p>I would like to change the height of the top and bottom points, making it look closer to a rectangle than it is now. How should I modify the border widths?</p>