фоновые изображения изометрической формы

фоновые изображения изометрической формы

17.06.2020 02:58:02 Просмотров 1 Источник

У меня есть дизайн передо мной, который выглядит следующим образом,

enter image description here

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

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

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

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

Есть ли простое решение, которого мне не хватает?

У вопроса есть решение - Посмотреть?

Ответы - фоновые изображения изометрической формы / isometric shape background images

Является ответом!
Tony Tom

17.06.2020 03:44:37

Вы можете попробовать что-то вроде этого

.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

Закрыть X