drawing shapes with css

Issue

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

but when I try to get the exact shape, IT looks like this below (Run the snippet)

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);
}

<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>

What Am trying to achieve with my header and shape drawing

final look I want to achieve or what it should should look like at the end

Solution

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>

Answered By - Randy