title: form Corner Pointed using css border
body: <p><img src="https://i.stack.imgur.com/I4K8H.jpg" alt="enter image description here"></p>
  
  <p>I am Struggling with CSS in doing the above corner as given in the image,</p>
  
  <p>I tried hard and got this But cannot get perfect corner with CSS.</p>
  
  <p><img src="https://i.stack.imgur.com/BlhrR.jpg" alt="enter image description here"></p>
  
  <p>I am trying it as to create a Bigger triangle of green color and then create a smaller triangle of white color to get that look.</p>
  
  <p>HTML CODE : </p>
  
  <pre><code>    &lt;div id="loginmain"&gt;
  &lt;div id="login" class="login_hover"&gt;
  
  &lt;/div&gt;
  &lt;div id="login-content" class="triangle-border top" style=""&gt;
      &lt;form onsubmit="loginAjax(); return false;" method="POST" _lpchecked="1"&gt;
          &lt;div&gt;&lt;lable&gt;Username&lt;/lable&gt;&lt;input name="username" id="username" type="text"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;lable&gt;Password&lt;/lable&gt;&lt;input name="password" id="password" type="password"&gt;&lt;/div&gt;
          &lt;a class="sign-up left clear"&gt;Sign Up&lt;/a&gt;
          &lt;a class="forgot"&gt;Forgot Password?&lt;/a&gt;
          &lt;input name="login" type="submit" value="Sign In"&gt;
      &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS CODE :</p>
  
  <pre><code>#login {
      position:absolute;
      top:10px;
      right:10px;
      width:53px;
      height:47px;
      background: url(../imgs/icons/user_border.png); 
      background-size:contain;
      cursor: pointer;
  }
  #login:hover , .login_hover {
      background: url(../imgs/icons/user.png) !important;
      z-index:9999;
  }
  
  
  .triangle-border {
      position:relative;
      padding:8px;
      margin:1em 0 3em;
      border:3px solid #00B100;
      color:#333;
      background:#fff;
      /* css3 */
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      border-radius:10px;
  }
  
  /* Variant : for left positioned triangle
  ------------------------------------------ */
  
  .triangle-border.left {
      margin-left:30px;
  }
  
  /* Variant : for right positioned triangle
  ------------------------------------------ */
  
  .triangle-border.right {
      margin-right:30px;
  }
  
  /* THE TRIANGLE
  ------------------------------------------------------------------------------------------------------------------------------- */
  
  .triangle-border:before {
      content:"";
      position:absolute;
      bottom:-20px; /* value = - border-top-width - border-bottom-width */
      left:40px; /* controls horizontal position */
      border-width:20px 20px 0;
      border-style:solid;
      border-color:#00B100 transparent transparent #00B100 ;
      /* reduce the damage in FF3.0 */
      display:block; 
      width:0;
  }
  
  /* creates the smaller  triangle */
  .triangle-border:after {
      content:"";
      position:absolute;
      bottom:-13px; /* value = - border-top-width - border-bottom-width */
      left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
      border-width:13px 13px 0;
      border-style:solid;
       border-color:#00B100 transparent transparent #00B100 ;
      /* reduce the damage in FF3.0 */
      display:block; 
      width:0;
  }
  
  /* Variant : top
  ------------------------------------------ */
  
  /* creates the larger triangle */
  .triangle-border.top:before {
      top:-20px; /* value = - border-top-width - border-bottom-width */
      bottom:auto;
      left:auto;
      right:10px; /* controls horizontal position */
      border-width:0 15px 20px;
  }
  
  /* creates the smaller  triangle */
  .triangle-border.top:after {
      top:-15px; /* value = - border-top-width - border-bottom-width */
      bottom:auto;
      left:auto;
      right:10px; /* value = (:before right) + (:before border-right) - (:after border-right) */
      border-width:0 15px 20px;
  }
  
  /* Variant : left
  ------------------------------------------ */
  
  /* creates the larger triangle */
  .triangle-border.left:before {
      top:10px; /* controls vertical position */
      bottom:auto;
      left:-30px; /* value = - border-left-width - border-right-width */
      border-width:15px 30px 15px 0;
      border-color:transparent #5a8f00;
  }
  
  /* creates the smaller  triangle */
  .triangle-border.left:after {
      top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
      bottom:auto;
      left:-21px; /* value = - border-left-width - border-right-width */
      border-width:9px 21px 9px 0;
      border-color:transparent #fff;
  }
  
  /* Variant : right
  ------------------------------------------ */
  
  /* creates the larger triangle */
  .triangle-border.right:before {
      top:10px; /* controls vertical position */
      bottom:auto;
      left:auto;
      right:-30px; /* value = - border-left-width - border-right-width */
      border-width:15px 0 15px 30px;
      border-color:transparent #5a8f00;
  }
  
  /* creates the smaller  triangle */
  .triangle-border.right:after {
      top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
      bottom:auto;
      left:auto;
      right:-21px; /* value = - border-left-width - border-right-width */
      border-width:9px 0 9px 21px;
      border-color:transparent #fff;
  }
  
  #login-content {
  position: absolute;
  top: 60px;
  right:10px;
  width: 290px;
  color: #848484;
  z-index: 9;
  padding: 13px;
  }
  
  #login-content a { width: 100%; display: block; }
  #login-content lable {
      padding-right:10px;
      width: 30%;
      display: inline-block;
  }
  #login-content div {
      margin-top: 10px;
  }
  #login-content input[type=text] ,#login-content input[type=password] {
     width: 58%;
     height: 25px;
     border: 1px solid #A6A6A6;
     font-size:12px;
     }
  #login-content input[type=text]:focus ,#login-content input[type=password]:focus {  
    border: 1px solid rgba(4, 213, 4, 1);
   }
   #login-content a.forgot {
          float:right;
          font-size:12px;
          cursor: pointer;
          margin-top: 5px;
          color:#848484;
   }  
   #login-content .sign-up{
      position: absolute;
      bottom: 15px;
      font-weight: normal;
      display: none;
   }
  #login-content input[type=submit] {
      clear: both;
      margin-top: 10px;
      float: right;
      cursor: pointer;
      font-size: 15px;
      padding:5px 10px;
  } 
  </code></pre>
  
  <p>Please suggest a solution for the same.</p>