如何创建响应式 slantedDiv？答案

【问题标题】：how to create responsive slantedDiv?如何创建响应式 slantedDiv？
【发布时间】：2019-08-10 17:40:34
【问题描述】：

.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 上添加段落或其他内容。但我尝试了所有可能的事情，但它与通常在 div 后面的 output.paragraphs 保持相同，它没有显示。请帮助我。提前致谢。:)

【问题讨论】：

请添加您所期望的屏幕截图。谢谢
请看我的回答，我会对你有所帮助。我使用 z-index 来避免它。
没问题，兄弟。我们在这里为您提供帮助:)

标签： html css twitter-bootstrap-3 bootstrap-4

【解决方案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>

【讨论】：