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上添加段落或其他内容。但是我尝试了所有可能的方法，但是它仍然与div后面通常的output.paragraphs相同，它没有显示。请帮帮我。提前谢谢。：）

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>

如何创建响应式slantedDiv？

1 个答案: