Страницы

Поиск по вопросам

воскресенье, 9 февраля 2020 г.

Как сверстать блок c такими рамками?

#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.


Комментариев нет:

Отправить комментарий