Есть идеи как сверстать фиксированный блок с такими рамками? Картинка сплошная, сделана бекграундом. Пробовал таким образом, но при добавлении текста все ломается.
.block {
display: inline-block;
height: 318px;
}
.block-1 {
box-sizing: border-box;
width: 739px;
padding: 35px;
padding-right: 0;
border: 3px solid #fff;
border-right: none;
}
.block-2 {
width: 198px;
margin-left: -4px;
border-bottom: 3px solid #fff;
}
.block-3 {
width: 198px;
margin-left: -3px;
border: 3px solid #fff;
border-left: none;
}
Ответ
Если заведомо известно, что человек будет "под рамкой" только снизу или сверху, то сымитировать нижнюю или верхнюю рамку можно псевдоэлементами :before или :after соответственно:
html,
body {
padding: 0px;
margin: 0px;
background: lightblue;
}
* {
box-sizing: border-box;
}
.block {
position: relative;
max-width: 580px;
margin: 50px auto;
border: #fff solid 2px;
border-bottom: none;
padding: 40px 270px 40px 20px;
}
.block:after {
display: block;
content: '';
width: 100%;
height: 2px;
background: #fff;
position: absolute;
z-index: 2;
left: 0px;
bottom: 0px;
}
.block-text {
color: #fff;
font-size: 14px;
line-height: 20px;
}
.block-img {
position: absolute;
z-index: 1;
right: 10px;
top: -40px;
width: 250px;
}
.block-img img {
width: 100%;
}
Комментариев нет:
Отправить комментарий