как создать отзывчивый slantedDiv? - PullRequest
Новая
       7

как создать отзывчивый slantedDiv?

0 голосов
/ 20 марта 2019

Я хочу что-то вроде этой картины 

.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, он не показывает. Пожалуйста, помогите мне. Заранее спасибо .:)

1 Ответ

0 голосов
/ 20 марта 2019

Я использовал 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>
...