Как сверстать блок с обрезанной по диагонали картинкой?

Question

Как сверстать такой блок? Больше интересует картинка, как ее вырезать такой формой или обрезкой с помощью css?

Answer 1

Варианты могут быть разные. Один из них - transform: skew

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
section {
  overflow: hidden;
  position: relative;
}
.text-block {
  background-color: #eaeaea;
  transform: skew(25deg);
  padding: 5% 30px 0 30%;
  width: 70%;
  position: absolute;
  left: -10%;
  height: 100%;
}
.text-block h1,
.text-block p {
  transform: skew(-25deg);
}
.pic-block {
  width: 50%;
  float: right;
}
.pic-block img {
  display: block;
  max-width: 100%;
}

<section>
  <div class="text-block">
    <h1>TITLE</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, fuga quibusdam id exercitationem, iure reprehenderit vel, minus dolore distinctio officiis deleniti quae fugit voluptate incidunt facilis modi nihil quis vitae.</p>
  </div>
  <div class="pic-block">
    <img src="https://pbs.twimg.com/media/Dk4Y79DW0AcaXLK.jpg:large" alt="">
  </div>

Answer 2

Вариант на SVG

<body style="margin: 0;">
  <svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg">
  <image x="0" y="0" width="640px" height="400px"
  preserveAspectRatio="none" href="https://i.stack.imgur.com/vqA3t.jpg"/>
  <path d="M0,0 280,0 400,480 0,480z" fill="#F5F5F5"/>
  <text fill="#555" x="50" y="50" font-size="" font-family="sans-serif">WE ARE THE BEST</text>
  
  <foreignObject x="50" y="60" width="230" height="300" font-size="12px">
      <p>In the context of SVG embedded in an HTML document, the XHTML
      namespace could be omitted, but it is mandatory in the
      context of an SVG document      Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
      porta vel dui convallis, rutrum imperdiet eros. Aliquam
      erat volutpat.</p>
  </foreignObject>
  
       <a href="http://yandex.ru" target="_blank" text-decoration="none">
         <rect width="200" height="40" fill="transparent" stroke="#555" x="50" y="320"></rect>
         <text x="100" y="345" font-size="12px">READ MORE</text>
         <path d="M180,340 200,340" stroke="#555"/>
         <path d="M190,335 200,340 190,345" fill="none" stroke="#555"/>
       </a>
</svg>

Answer 3

Вариант с использованием clip-path

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

section {
  overflow: hidden;
  position: relative;
  background-color: #eaeaea;
}

.text-block {
  padding: 5% 30px 0 30%;
  width: 70%;
  position: absolute;
  left: -10%;
  height: 100%;
}

.pic-block {
  width: 50%;
  float: right;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
}

.pic-block img {
  display: block;
  max-width: 100%;
}

<section>
  <div class="text-block">
    <h1>А.С. Пушкин</h1>
    <p><br>Я помню чудное мгновенье:<br>Передо мной явилась ты,<br>Как мимолетное виденье,<br>Как гений чистой красоты.</p>
  </div>
  <div class="pic-block">
    <img src="https://cbs-vao.ru/wp-content/uploads/2020/01/Библ.-74_анонс_06.02.20_мы-с-Пушкиным-знакомы-с-детства.jpg" alt="">
  </div>
</section>

БЛОГ НА HUSL

Как сверстать блок с обрезанной по диагонали картинкой?

Ответы (3 шт):