css - placing background image in a rhombus shaped container is causing the container to lose its shape

Question

The title sums it up pretty much, I can get the rhombus drawn easily enough but when I add an image to the background it adds more sides to the shape. I can't seem to figure out why this is happening when the background image is added. Any advice would be appreciated

Here is the code I have, excuse the inline css I am only doing it like this until I have a working solution then I will transfer the css into the external css file.

A demo can be found here

 <div class="row">
<div class="col-sm-4" >
<div style=" margin:50px auto;
 width:200px;
 height:200px;
 overflow:hidden;
 border-radius: 28px;
 transform: rotate(45deg);
 -ms-transform: rotate(45deg); 
 -webkit-transform: rotate(45deg);">

<img src="images/stripsResize.jpg" alt="Chicken Strips" style="transform: 
 rotate(-45deg);
 -ms-transform: rotate(-45deg); 
 -webkit-transform: rotate(-45deg); 
  top:-100px;
  left:-100px;">
 </div>
</div>

<div class="col-sm-4">
<div style="width:200px;
 height:200px;
 overflow:hidden;
 border-radius: 28px;
 transform: rotate(45deg);
 -ms-transform: rotate(45deg); 
 -webkit-transform: rotate(45deg); 
 background-color: green;">
</div>
</div>
<div class="col-sm-4">
 <h1>Desert</h1>
</div>
</div>

Answer 1

You need to increase the width/height of the image and you may consider flexbox to easily center it. It then overflow equally from the 4 sides and it will cover the gap:

.box {
  margin: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid;
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(45deg);
}

.box img {
  transform: rotate(-45deg);
  width: 141%;
  height: 141%;
  flex-shrink: 0;
}

<div class="box">
  <img src="https://picsum.photos/200/200?image=1069">
</div>