html - 溢出隐藏的div

Question

有没有办法让一个 div 只显示特定的位置来查看，而其他内部元素隐藏为溢出隐藏

例如，div 的尺寸为 (500px x 500px)，但我只想显示 (100px x 100px)。 div 中的元素不会按比例缩小，而是显示为部分。

就像这张图一样，我只想显示这个红色区域内的内容和其他要隐藏的元素。

当前代码=>

<div class="box1">
    <div style="">
        Something 2<br>
        Something 3<br>
        Something 4<br>
        Something 5<br>
        Something 6<br>
        Something 7<br>
        Something 8<br>
        Something 9<br>
        Something 10<br>
    </div>
</div>

还有 CSS =>

.box1{
 position: relative;
 overflow: hidden;
 top:10px;
 width:100px;
 height: 100px;
}

.box2{
position: absolute;
background-color: #00CC00;
width: 500px;
height: 500px
}

Answer 1

是的，这是可以做到的

了解 https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path 下面带有动画的简单演示。

td{
  padding: 20px;
   background-color: #0ad;
}


.clipped {
  animation : clip 2s linear infinite alternate;
}


@keyframes clip {
  from { clip-path: polygon(0px 0px, 100px 0px , 100px 100px, 0px 100px)  }
  to {clip-path: polygon(0px 200px, 100px 200px , 100px 300px, 0px 300px) }
}

<div class="container">
  <table>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>    
  </table>
  
  </div>
  
  <div class="clipped">
  <table>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>    
  </table>
  
  </div>