This design uses a PNG image created in Photoshop:
When it comes to images:
Notice how the shape resembles a trapezium with one perpendicular side and another tilted.
How can we achieve this layout using HTML/CSS, so that any image placed inside this div is always displayed within the trapezium, creating a sleek user interface.
What is the process for creating this shape using HTML/CSS? Code following the accepted solution:
<div class="scissor"><img src="1.png" style="width:200px"></div>
and the corresponding CSS:
.scissor{
width: 300px;
height: 150px;
background: #FF6100;
position: relative;
}
.scissor:after{
content: '';
position: absolute; top: 100%; left: 0;
width: 0;
height: 0;
border-top: 100px solid #000;
border-right: 300px solid transparent;
display: block;
}
span{
display: inline-block;
width: 80px;
height: 80px;
border: 10px solid #fff;
border-radius: 50%;
position: absolute; top: 40%; left: 50%;
z-index: 1;
transform: translateX(-50%);
}