3

введите сюда описание изображения

Есть идеи как сверстать фиксированный блок с такими рамками? Картинка сплошная, сделана бекграундом. Пробовал таким образом, но при добавлении текста все ломается.

.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;
}
<div class="blocks">
  <div class="block-1 block"></div>
  <div class="block-2 block"></div>
  <div class="block-3 block"></div>
</div>

0

1 ответ 1

5

Если заведомо известно, что человек будет "под рамкой" только снизу или сверху, то сымитировать нижнюю или верхнюю рамку можно псевдоэлементами :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%;
}
<div class="block">
  <div class="block-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="block-img">
    <img src="https://i.stack.imgur.com/piEec.png" alt="" />
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.