I've been trying to create a diamond shape with an image inside, but I'm facing issues with the distortion of the image. My goal is for the image to appear in its regular horizontal orientation and completely fill the diamond shape.
If you want to take a look at the code I've created.
.diamond {
width: 300px;
height: 300px;
border: 3px solid white;
outline: 2px solid black;
outline-offset: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(67.5deg) skewX(45deg) scaleY(0.70711);
overflow: hidden;
}
.diamond-image {
background-image: url("https://images7.alphacoders.com/108/1082408.png");
background-size: cover;
position: absolute;
height: 100%;
width: 140%;
top: 0px;
left: 0px;
transform-origin: top bottom;
}
html{
height: 100%;
}
body{
background: rgb(224,215,215);
background: radial-gradient(circle, rgba(224,215,215,1) 0%, rgba(144,144,144,1) 100%);
}<div class="diamond">
<div class="diamond-image"></div>
</div>