溢出隐藏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>