如何在 Chrome 中正确将背景图像设置为 div？

Question

我正在学习前端开发，任务是制作带有图像的对角 div。我做到了，在 Firefox 中它看起来很棒，但是当我在 Chrome 中打开它时，它显示不正确。

可能是什么原因？如何在 Chrome 中修复它？

菲福克斯：

铬：

到目前为止，我是这样做的：

.container {
  display: flex;
  margin: 0;
  padding: 0;
  max-width: 100%;
  background-color: green;
  height: 300px;
}

.red-div {
  background-color: red;
  width: calc(50% - 50px);
  box-sizing: border-box;
}

.orange-div {
  width: calc(50% + 50px);
  height: 100%;
  background: orange;
  box-sizing: border-box;
  border-left: 100px solid red;
  border-bottom: 327px solid transparent;
  background: url("https://picsum.photos/id/1/800/800");
  background-size: 527px;
  background-position: -200px 0;
}

<div class="container">
  <div class="red-div">Test</div>
  <div class="orange-div"></div>
</div>

Answer 1

试试这个

.container{
  display: flex;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: 300px;
}
.image-div {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f00;
  background-image: url(https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png);
  background-size: 60% 100%;
  background-position: right center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.image-div::before {
  content: " ";
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
  position: absolute;
  height: 150%;
  width: 20%;
  background: #f00;
  top: -100px;
  left: 28%;
}

      <div class="container">
        <div class="image-div">

        </div>
    </div>