如何创建响应式slantedDiv？

Question

I want something like this picture

.slantedDiv
{
	position: relative;
	width: 100%;
	height:500px;
	background: #C57ED3;
	box-sizing: border-box;
	padding:30px;
	color:#fff;
}
.slantedDiv:after
{ position: absolute;
width:100%;
height:100%;
content: '';
background:red ;
top:0;
right:0;
bottom:0;
left:0;
transform-origin: top left;
transform: skewY(4deg);

}
#image {
   
  margin-top: -20px;
}

<div class="slantedDiv" id="image" >
   hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>

你好，实际上我想创建一个响应式斜线div并在div上添加段落或其他东西。但我尝试了所有可能的东西，但它仍然是相同的output.paragraphs通常在div后面，它没有显示。请帮助我。提前致谢。：）

Answer 1

我用z-index来解决这个问题请看代码。

.slantedDiv
{
	position: relative;
	width: 100%;
	height:500px;
	background: #C57ED3;
	box-sizing: border-box;
	padding:30px;
	color:#fff;
  z-index: 10;
}
.slantedDiv:after
{ position: absolute;
width:100%;
height:100%;
content: '';
background:red;
top:0;
right:0;
bottom:0;
left:0;
transform-origin: top left;
transform: skewY(4deg);
z-index: -1;
}

<div class="slantedDiv" id="image" >
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>