#html #css
Есть идеи как сверстать фиксированный блок с такими рамками? Картинка сплошная, сделана бекграундом. Пробовал таким образом, но при добавлении текста все ломается. .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; }
Ответы
Ответ 1
Если заведомо известно, что человек будет "под рамкой" только снизу или сверху, то сымитировать нижнюю или верхнюю рамку можно псевдоэлементами :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%; }Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Комментариев нет:
Отправить комментарий