Геометрический блок с картинкой [дубликат]

279

30 апреля 2018, 22:06

На данный вопрос уже ответили:

Как сделать выравнивание текста по наклонной линии? 1 ответ

Возник вопрос при верстке такого блока, а именно как растянуть текст и картинку на всю ширину блока?

Answer 1

В общем по шагам 1) создаём элемент .shape он будет с права обтекать текст и тем самым сдвигать его

2) изображение которое в контейнере и перекрыто двумя элементами border

я этот вопрос уже задавал ранее и мой ответ полностью его копирует:https://stackoverflow.com/a/38859507/6339052

Лучше конечно такое делать на svg

* { 
  margin: 0; 
  padding: 0; 
} 
 
.shape { 
  background: rgba(200, 0, 0, 0); 
  box-sizing: border-box; 
  height: 1.25em; 
  float: right; 
  clear: right; 
} 
 
.wrapper { 
  width: 560px; 
  margin: 30px auto; 
  position: relative; 
} 
 
img { 
  display: block; 
  max-width: 150px; 
  height: 150px; 
} 
 
.imc { 
  position: absolute; 
  top: 0; 
  right: 0; 
  z-index: -1; 
} 
 
.imc:before { 
  content: ""; 
  border-left: 50px solid #fff; 
  border-right: 50px solid transparent; 
  border-top: 50px solid transparent; 
  border-bottom: 50px solid #fff; 
  position: absolute; 
  bottom: 0; 
}

<div class="wrapper"> 
 
  <span class="elems" aria-hidden="true"> 
  <div class="shape" style="width: 9em"></div> 
  <div class="shape" style="width: 8em"></div> 
  <div class="shape" style="width: 7em"></div> 
  <div class="shape" style="width: 6em"></div> 
  <div class="shape" style="width: 5em"></div> 
  <div class="shape" style="width: 4em"></div> 
  <div class="shape" style="width: 3em"></div> 
  <div class="shape" style="width: 2em"></div> 
  <div class="shape" style="width: 1em"></div> 
</span> 
  <div class="text-body"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus </p> 
  </div> 
  <div class="imc"><img src="http://1.bp.blogspot.com/-MdrHMjPr9SQ/VVEVzjy1f9I/AAAAAAAAAaw/GfefMa0KdV0/s1600/fashion-girl-ikoseomer-model-1408.jpg" alt=""></div> 
</div>