Alex Davies Alex Davies - 28 days ago 27
CSS Question

drawing shapes with css

Am trying to get a shape drawn in css on the header of my webpage. it supposed to look like this.

What I want to draw

but when I try to get the exact shape, IT looks like this

what I drew Am not so good at css so am struggling here. The codes are below.



header {
padding: 0px !important;
height: auto !important;
}

.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}

.spanheader {
font-size: 20px;
}

.logo {
z-index: 1;
position: relative;
}

.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}

#draw {
height: 30px;
width: 100%;
background-color: #fff;
}

#green {
height: 60px;
width: 100%;
border-width: 0px;
border-left: 280px solid white;
border-top: 20px solid white;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}

<html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->

<!-- Mirrored from byrushan.com/projects/ma/1-6-1/jquery/light/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 14 Jun 2016 14:12:13 GMT -->

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WEBPAGE </title>

</head>

<body>
<section id="header" class="header">

<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>


<div id="draw">
</div>

<div id="green"></div>

</section>

</body>



</html>




Answer

You can just create a small white rectangle at the left top, skew it and move it a little to the left to remove the green triangle:

.green {
  background-color:#0f0;
  height:60px;
  width:100%;
}

.draw {
  height:30px;
  margin-left:-15%;
  width:30%;
  background-color:#fff;
  
  
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}
<div class="green">
  <div class="draw">
  </div>
</div>