<div class="container">
<img id="img1" src="https://png.pngtree.com/png-clipart/20220703/original/pngtree-black-decorative-line-divider-dividing-line-png-image_8285006.png" alt="">
<img id="img2" src="https://png.pngtree.com/png-clipart/20220703/original/pngtree-black-decorative-line-divider-dividing-line-png-image_8285006.png" alt="">
<h1>Hello World</h1>
</div>
img {
width: 800px;
transform: rotate(-20deg);
}
.container {
width: 800px;
height: 200px;
background: #666;
display: flex;
justify-content: center;
align-items: center;
clip-path: inset(0px 0px 0px 0px);
}
#img1 {
z-index: 1;
position: absolute;
margin-top: 50px;
}
h1 {
color: white;
z-index: 2;
position: absolute;
}
#img2 {
z-index: 3;
position: absolute;
margin-bottom: 30px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.