title: How to make this design in using css?
body: <p>I am trying to make this design but could n't get any success ? I am not getting to overcome this issue Any help would be appreciable </p>
  
  <p>I am attaching the image for the design I wanted </p>
  
  <p><a href="https://i.stack.imgur.com/atxJJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/atxJJ.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my code that I have tried </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.auth__container {
      min-height: 70%;
      width: 50%;
      margin: 2rem;
      border-radius: .4rem;
      background-color: #fff;
      box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
      -webkit-transition: all .5s ease;
      transition: all .5s ease;
  }
  
  .auth__nav {
      list-style: none;
      margin-left: 10%;
      padding: 0;
      background: #e8e6e6;
      width: 50%;
      
  }
  
  .auth__nav-heading {
      width: 50%;
      background-color: #e42a70;
      position: relative;
      top: 0;
      left: -1rem;
      height: 4rem;
      color: #fff;
  }
  
  .auth__nav-heading:before {
      border-width: 0 1rem 1rem 0;
      border-color: transparent blue;
      left: 0;
      bottom: -1rem;
  }  </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="auth__nav"&gt;&lt;li class="auth__nav-item auth__nav-heading"&gt;Sign up&lt;/li&gt;&lt;li class="auth__nav-item"&gt;Login&lt;/li&gt;&lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I wanted the border bottom should be pointed like in the image I have marked but I am not getting it, Can anyone help me out with this issue ?</p>