isometri c shape фоновые изображения - PullRequest
Новая
       45

isometri c shape фоновые изображения

0 голосов
/ 17 июня 2020

Передо мной рисунок, который выглядит так:

enter image description here

Как вы можете видеть, есть синий квадрат (эта правая половина будет скрыт за экраном), который перекрывает три отдельных раздела веб-страницы, и я не знаю, как с этим справиться.

Единственные 2 варианта, которые я могу:

1) Добавить часть фиолетового квадрата в каждый из 3 разделов, чтобы он слился вместе, однако каждый раздел имеет гибкое содержание, поэтому изменения

2) Добавьте абсолютно позиционированный div и поместите его там, где мне нужно, с квадратом в качестве фонового изображения, а затем поиграйте с z-индексированием?

Есть простое решение что мне не хватает?

1 Ответ

1 голос
/ 17 июня 2020

Можно попробовать что-то вроде этого 

.parent {
  display: flex;
  flex-direction: column
}
.card {
  disaply: flex;
  background: darkblue;
  height: 200px;
  width: 350px;
}

.card2 {
  disaply: flex;
  background: skyblue;
  height: 200px;
  width: 350px;
}

* {
  margin: 0;
  padding: 10px;
}
.diamond {
  height: 150px;
  width: 150px;
  background-color: purple;
  transform: rotate(45deg);
  z-index: 1000;
  margin-left:274px;
  top: 0;
  background: linear-gradient(to left bottom, #ff66ff 50%, #ffe6ff 50%);
} 
<div class="parent">
<div class="card">
  <h1>Item1</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p>
<div class="diamond"></div>
</div>

<div class="card2">
<h1>Item1</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p>  
</div>
</div>

https://codepen.io/tonytomk/pen/ExPNWjz

...