How do you make polygon made with pseudo elements responsive - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

How do you make polygon made with pseudo elements responsive

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 . j a  va2 s.  c  om-->
   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