Polygon shaped login panel - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Shape

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Shape

Description

Polygon shaped login panel

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, conse</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
* {<!--from   ww w . ja v a  2  s  .  c  o  m-->
   box-sizing:border-box;
}

header {
   height:100px;
   text-align:center;
   line-height:100px;
   background-color:Chartreuse;
}

form {
   box-shadow:0 0 16px 2px yellow;
   background-color:blue;
   margin:-11px auto;
   padding:21px;
   width:241px;
   position:relative;
}

form::before {
   content:'';
   width:0;
   height:0;
   border-left:21px solid pink;
   border-right:21px solid OrangeRed;
   border-bottom:21px solid grey;
   position:absolute;
   top:-21px;
   left:51%;
   margin-left:-21px;
}

form::after {
   content:'';
   width:0;
   height:0;
   border-left:121px solid BlueViolet;
   border-right:121px solid Chartreuse;
   border-top:71px solid yellow;
   position:absolute;
   bottom:-71px;
   left:0;
}

input {
   display:block;
   width:100%;
}

@media only screen and (max-width: 360px) {
   form {
      width:161px;
   }
   
   form::after {
      -webkit-transform:scale(0.68);
      transform:scale(0.68);
      -webkit-transform-origin:left top;
      transform-origin:left top;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <header>
    Lorem ip 
  </header> 
  <form> 
   <label for="lastname">Lorem ipsu</label> 
   <input type="text" id="lastname"> 
   <br> 
   <br> 
   <label for="firstname">Lorem ipsum</label> 
   <input type="text" id="firstname"> 
   <br> 
   <br> 
   <input type="submit" value="Submit"> 
  </form>  
 </body>
</html>

Related Tutorials