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

标题总结得很好，我可以很容易地绘制菱形，但是当我将图像添加到背景时，它会为形状添加更多边。我似乎无法弄清楚为什么添加背景图像时会发生这种情况。任何意见，将不胜感激

这是我的代码，请原谅内联 css，我只是这样做，直到我有一个可行的解决方案，然后我会将 css 传输到外部 css 文件中。

可以在这里找到演示 http://shanelucy.pcriot.com/huntinglodge/huntinglodge.php

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

您需要增加图像的宽度/高度，并且您可以考虑使用 Flexbox 来轻松地将其居中。然后它会从 4 个边均匀地溢出并覆盖间隙：

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

为什么正好是 141%？

为了更精确和准确，它是准确的sqrt(2) * 100% ~ 141%。这是一个更好理解的插图（我删除了border-radius并仅对框和图像应用旋转）：

绿线是我们想要计算的宽度（或者高度，因为我们有一个正方形），红线是盒子的宽度/高度，毕达哥尔说公式是W² = h² + w² and h = w所以我们有W = sqrt(2) * h.

如果您想更准确，我们还可以减少由border-radius。考虑如何半径工程 https://www.w3.org/TR/css-backgrounds-3/#the-border-radius我们可以画这样的图：

红线定义了值border-radius (20px在这种情况下）。绿线等于sqrt(2)*20px[使用前面的公式]我们需要删除的距离（由橙色线定义）很简单sqrt(2)*20px - 20px ~ 0.41 * 20px ~ 8.28px。所以最终的代码可能是：

.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: calc(141% - 8.28px);
  height: calc(141% - 8.28px);
  flex-shrink: 0;
}

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

^{The above formula works only for this particular and easy case. The calculation may become more complex for other situation}