仅在 CSS 中隐藏框给定边缘的溢出

Question

嗨，我想制作一个3D盒设计，看起来像 从盒子 出来的对象。

• 这里的一个图像将在一个盒子内。
• 图像将比容器盒大。
• 我想隐藏左右的溢出。

我正在努力从4个小时起为此设计而努力，但没有得到结果和解决方案。

这是我要构建的演示：

Answer 1

您能检查一下

我使用网格布局模型吗？您可以将图像放入内部.container具有位置：绝对;上

*,
*::before,
*::after {
  box-sizing: border-box;
}


img,
picture {
  max-width: 100%;
  display:block;
}

body{
  min-height: 100vh;
  display: grid;
  place-content: center;
}


.container{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr ;
  grid-template-rows: 1fr 3fr 1fr;
  width: 750px;
  height: 750px;
  /* background-color: tomato; */
  position: relative;
}

.box{
  position: relative;
  background-color: tomato;
  z-index:2;
}


.box-1{
  grid-column: 2 / 4;
  grid-row: 1;
  z-index:1;
}

.box-2{
  grid-column: 3;
  grid-row: 2 / 3;
  z-index:1;
}

.box-3{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background-color: yellowgreen;
  z-index:1;
}


.box-4{
  grid-column: 1;
  grid-row: 1 / -1;
  
  overflow: hidden;
}

.box-5{
  grid-column: 2 / -1;
  grid-row: 3;
  overflow: hidden;
}

.box-6{
  position: absolute;
  z-index: 1;
}

<div class="container">
      <div class="box-1 box"></div>
      <div class="box-2 box"></div>
      <div class="box-3 box"></div>
      <div class="box-4 box"></div>
      <div class="box-5 box"></div>
      <div class="box-6">
        <img src="https://source.unsplash.com/random/780x400" alt="" />
      </div>
</div>