Как сверстать такой блок? Больше интересует картинка, как ее вырезать такой формой или обрезкой с помощью css?
3 ответа
Варианты могут быть разные. Один из них - 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>
-
-
2@MaximLensky, не, ну для маленьких экранов, разумеется, адаптацию надо делать :))) Это ж десктопная версия - как на картинке 10 фев 2021 в 13:39
Вариант на 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>
-
@Alexandr_TT как Эдж переехал на вэблик я сразу стал делать на форигн объекте - удобно просто 10 фев 2021 в 16:16
Вариант с использованием 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>
-
1