<div class="container">
<div class="left__side">
<h1 class="title">Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, nisi.</p>
<p>Labore aliquam temporibus placeat unde, alias pariatur voluptate! Numquam, quidem.</p>
<p>Aliquid deleniti a possimus exercitationem iusto. Exercitationem sapiente debitis perferendis.</p>
</div>
<div class="right__side">
<div class="img__inner"></div>
</div>
</div>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
line-height: 1.3;
}
h1 {
font-size: 30px;
margin-bottom: 10px;
}
.container {
display: flex;
min-height:100vh;
background-color: #000;
}
.left__side, .right__side {
width: 50%;
}
.left__side {
padding: 20px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.right__side {
filter: drop-shadow(-20px 0px 0px lightgreen);
}
.img__inner {
width: 100%;
height: 100%;
background-image: url('https://picsum.photos/900/600');
background-size: cover;
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 5% 50%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.