HTML. Разворот рамки (двойной)

Question

HTML. Разворот рамки (двойной)

Екатерина Л. Профи (792), закрыт 2 недели назад

Здравствуйте. Помогите, пожалуйста. Встряла при выполнении задания((

Задача сделать вокруг изображения 2 рамки и одна из них повернута:

С рамкой обводящей картинку все понятно. Мой код:

Со второй проблемы.

Не знаю где ее указывать. Внутри атрибута .border1, наверное, уже не могу. И добавть второй div не получается.
Проблема с самим кодом. Применяла " transform: rotate(45deg);" - к рамке именно не добавляется, но вращает само изображение. z-index должен перемещать элемент на передний или задний план, но почему-то не действует. border-top-left-radius тоже пробовала добавлять.

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

Answer 1

Надо накладывать не один блок с рамкой, а два:

 .border1 {
  position: fixed; /* почему именно fixed? */
  margin-top: 70px;
  margin-left: 150px;
}

.border1 img {
  display: block;
  width: 500px;
  height: 500px;
  border: 24px solid #EEEBF0;
}

.border_lower {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 500px;
  border: 24px solid #FFF0F0;
  transform: rotate(45deg);
  z-index: -1;
}

.border_upper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 500px;
  border: 24px solid rgba(0, 0, 0, 0);
  border-left-color: #FFF0F0;
  border-right-color: #FFF0F0;
  transform: rotate(45deg);
  z-index: 1;
}

А вот так можно обойтись без дополнительных блоков:

 .border1 {
  position: fixed;
  margin-top: 70px;
  margin-left: 150px;
}

.border1 img {
  display: block;
  border: 24px solid #EEEBF0;
}

.border1 img::before {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  width: 100%;
  height: 100%;
  border: 24px solid #FFF0F0;
  transform: rotate(45deg);
  z-index: -1;
}

.border1 img::after {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  width: 100%;
  height: 100%;
  border: 24px solid rgba(0, 0, 0, 0);
  border-left-color: #FFF0F0;
  border-right-color: #FFF0F0;
  transform: rotate(45deg);
  z-index: 1;
}

Answer 2

Горький Опыт Профи (740) 2 недели назад

Интересное извращение. Обычно такие повернутые рамки делают в фоторедакторе, не задействуя CSS.

Екатерина Л.Профи (792) 2 недели назад

Извращение. На 4 занятии, где мы даже не проходили вращения. Надеюсь в практике реальной с таким не столкнусь, если вообще дойду до этой реальной практики))

Горький Опыт Профи (740) Екатерина Л., извращение не в повороте, что несложно, а в том, что рамка-то непростая - два уголка фотки за рамкой, а два перед рамкой. То есть, эта рамка должна состоять из минимум двух объектов.