Как сделать рамку так чтобы одна часть была над другим элементом а другая под другим элементом?

Рейтинг: 0Ответов: 1Опубликовано: 24.05.2023

Всем привет. Помогите пожалуйста сделать рамки как на картинке, так чтобы одна часть была над другим элементом а другая под другим элементом ? введите сюда описание изображения

css html
Источник: Stack Overflow на русском

Ответы

▲ 4

Две рамки блока-обёртки будут под изображением, а две других рамки создаём с помощью псевдоэлемента, который будет над изображением за счет абсолютного позиционирования. Само изображение тоже с абсолютным позиционированием, но ниже, чем слой псевдоэлемента.

* {
  box-sizing: border-box;
}

div {
  width: 200px;
  height: 200px;
}

.picture {
  position: absolute;
  transform: rotate(45deg);
  border: 10px solid #f0f0f0;
  background: url("https://icdn.lenta.ru/images/2021/08/30/11/20210830113231833/detail_0e4c926500a5dd704b171e9d3f98f1ab.jpg") no-repeat;
  background-size: cover;
}


.border {
  position: relative;
  transform: rotate(-45deg);
  border-left: 10px solid #fbbcbc;
  border-right: 10px solid #fbbcbc;
  margin: 50px;
}

.border::before {
  position: absolute;
  content: '';
  inset: 0;
  border-top: 10px solid #fbbcbc;
  border-bottom: 10px solid #fbbcbc;
  z-index: 5;
}
<div class="border">
  <div class="picture"></div>
</div>