如何制作平底的斜角矩形？

Question

好的，所以这就是我的问题。我的网页上有一个Diagonal Shape，如下图所示：

现在我需要的是这样的：

我需要一个像蓝色虚线轮廓创建的形状。现在我已经尝试改变并绕过First Shape的值，但仍然无法取得任何成功。 请注意，两个形状 - 已经存在的形状和虚线所示的形状 - 必须是两种不同的形状。

希望有人可以帮我完成这个。另外，我在第一个形状的底部和我想绘制的底部之间没有任何空间。

这是我已经存在的形状的代码（HTML和CSS）：

＆＃13;

＆＃13;

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

＆＃13;

<div class="BeginToday9" style="height: 500px; text-align: center; margin-top: 0;">

</div>

＆＃13;

＆＃13;

＆＃13;

此致 Satanshu Mishra

Answer 1

这是看起来像你要求的东西。注：第二个形状只是在倾斜矩形下滑动的另一个矩形。 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;
}