title: CSS - make border bottom shape like trapezoid
body: <p>I want to create menu where I need a feature like if any user hover the menu there will be a border and the border bottom only. I want to display the bottom border like trapezoid. </p>
  
  <blockquote>
    <p>In my case i don't have a div for border, its only border-bottom.</p>
  </blockquote>
  
  <p>Here is what I've tried: 
  <div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myDiv{
    background: #FED;
    border-bottom: 5px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myDiv"&gt;
    My div, I want to make my border bottom like trapezoid.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I achieve this?</p>