How to make the image "normal" in a skewed div? - html

Question

So I wanted to make a diamond with an image in it but the image will deform. I want to make it so that it's horizontal (normal) and filling the diamond.
The code I made.
.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>

Answer 1

It would probably be complex to invert the transformation. I would build this differently without transformation.
You can simply control the shape by adjusting the width/height and the CSS variables
html{
min-height: 100%;
background: radial-gradient(circle, rgba(224,215,215,1) 0%, rgba(144,144,144,1) 100%);
}
.box {
--d:15px; /* gap between border and outline*/
--b1:3px; /* width of outline (black)*/
--b2:3px; /* width of border (white) */
--g1:transparent calc(48% - var(--d) - var(--b1) - var(--b2)) ,
#fff calc(49% - var(--d) - var(--b1) - var(--b2)) calc(49% - var(--b1)),
#000 calc(50% - var(--b1));
--g2:#fff calc(48.5% - var(--d) - var(--b1) - var(--b2)) calc(48.5% - var(--d) - var(--b1)),
transparent calc(49% - var(--d) - var(--b1)) calc(49% - var(--b1)),
#fff calc(49.5% - var(--b1)) 49.5%,
transparent 50%;
width:200px;
height:400px;
display:inline-block;
vertical-align:top;
background:
linear-gradient(to top right,var(--g1)) top right / 50% 50%,
linear-gradient(to top left ,var(--g1)) top left / 50% 50%,
linear-gradient(to bottom right,var(--g1)) bottom right / 50% 50%,
linear-gradient(to bottom left ,var(--g1)) bottom left / 50% 50%,
url(https://picsum.photos/id/1074/800/800) center/cover;
background-repeat:no-repeat;
-webkit-mask:
linear-gradient(to top right,var(--g2)) top right,
linear-gradient(to top left ,var(--g2)) top left,
linear-gradient(to bottom right,var(--g2)) bottom right,
linear-gradient(to bottom left ,var(--g2)) bottom left;
-webkit-mask-size:50% 50%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(to top right,var(--g2)) top right,
linear-gradient(to top left ,var(--g2)) top left,
linear-gradient(to bottom right,var(--g2)) bottom right,
linear-gradient(to bottom left ,var(--g2)) bottom left;
mask-size:50% 50%;
mask-repeat:no-repeat;
}
<div class="box"></div>
<div class="box" style="width:300px;--b1:5px;--d:20px"></div>
<div class="box" style="height:200px;--b2:5px;--d:5px"></div>