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

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>

READ ALSO
Ошибка запроса в SqLite

Ошибка запроса в SqLite

Не пойму,в чем причина

282
Сортировка Map по значению из value

Сортировка Map по значению из value

Есть Map<String, Warp>У класса Warp есть метод getVisits();

336
Подгон изображения по размерам jLabel

Подгон изображения по размерам jLabel

Нужно чтобы изображение которое загружалось jLable в приняло размеры такие как сам компонент jLabel Вот код, что здесь нужно добавить?

229