Css 将背景图像放置在菱形容器中会导致容器失去形状

标题总结了很多，我可以很容易地画菱形，但当我在背景中添加图像时，它会为形状添加更多的边。我似乎不明白为什么在添加背景图像时会发生这种情况。如有任何建议，将不胜感激

这是我的代码，请原谅内联css我只是这样做，直到我有一个工作的解决方案，然后我会转移到外部css文件的css

沙漠
 
你需要增加图像的宽度/高度，你可以考虑FrasBox来轻松地对它进行定位。然后从4个侧面均匀溢出，并覆盖间隙：

.box{
利润率：50像素；
显示：内联flex；
对齐项目：居中；
证明内容：中心；
宽度：200px；
高度：200px；
边框：1px实心；
边界半径：20px；
溢出：隐藏；
变换：旋转（45度）；
}
.box img{
变换：旋转（-45度）；
宽度：141%；
身高：141%；
弹性收缩：0；
}


 <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>