Надо накладывать не один блок с рамкой, а два:
.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;
}
Екатерина Л.Профи (792)
3 недели назад
Андрей, ВЫ ГЕНИЙ!!! СПАСИБО ОГРОМНОЕ, ОГРОМНОЕ!!! Своей бы головой не дошла до такого сложного задания.
Код изначально у меня не до конца работал. Немного переписала, наконец получила эти 2 рамки, все встало на свои места. Но все с помощью Вас, вращение рамок после 4 занятий мне не дано просто освоить, спасибо!!!
Прекрасный результат) может где-то и есть ошибки после меня, но результат как в задании, а это главное.
СПАСИБО!!!!!!!!!
Задача сделать вокруг изображения 2 рамки и одна из них повернута:С рамкой обводящей картинку все понятно. Мой код:Со второй проблемы.
Помоветуйте, пожаааалуйста, как исправить это, может частично. Пробую методом проб всяко-всяко, но или ничего не происходит, или результат иной(