Q:

How to Make diagonal rectangle with the flat Bottom?

Ok, So here's my Problem. I have a made a Diagonal Shape on my webpage like in the Image Below:

Now What I need is something like this:

I need a Shape like the one created by the blue dotted outline. Now I have tried changing and moving around the values of the First Shape but still wasn't able to get any success. Please Noe that the Two shapes - the already existing shape and the one Outlined by the Dotted line's - must be two different shapes.
Hope Someone can Help me Accomplish this. Also, I can not have any space between the bottom of the first shape and the one I want to draw.
Here is my Code (HTML and CSS) for the already exising shape:

.BeginToday9 {
  text-align: center;
  font-size: 22px;
  padding-left: 425px;
  padding-right: 425px;
  background-color: #2ecc71;
  color: white;
  z-index: 1;
  -webkit-transform: skewY(5deg);
  -moz-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  -o-transform: skewY(5deg);
  transform: skewY(5deg);
}

.BeginToday9>.wrapper {
  -webkit-transform: skewY(-5deg);
  -moz-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  -o-transform: skewY(-5deg);
  transform: skewY(-5deg);
}
<div class="BeginToday9" style="height: 500px; text-align: center; margin-top: 0;">

</div>

Regards
Satanshu Mishra

A:

Here is something that looks like you are requesting. N.B. the second shape is just another rectangle that is slid under the skewed rectangle.
https://jsfiddle.net/055Ltymg/
HTML
<div id="wrapper">
<div id="A">
</div>
<div id="B">
</div>
</div>

CSS
#A {
    background-color: #2ECC71;
    height: 200px;
    padding: 0px 50px;
    position: relative;
    transform: skewY(5deg);
    z-index: 2
}
#B {
    background-color: white;
    border: 2px dotted blue;
    height: 300px;
    position: relative;
    top: -100px;
}
#wrapper {
    position: relative;
    top: 100px;
}

