排版（字母）的某些部分响应窗口的宽度/高度？

我不确定这样的事情是否可以通过 CSS 实现，但是这个社区中的才华横溢的人们已经多次证明我错了，所以我们开始吧！

我想知道字母的某些水平部分是否可能O, U, and E可以在保持其位置的同时响应窗口的宽度吗？在下图中，我绘制了响应式排版如何对窗口比例做出反应。请注意，设置的类型放置在换页内并垂直放置在窗口中间。

我怎样才能做到这一点？我应该使用什么格式（svg、形状等）

先感谢您！

您可以简单地通过在 div 内覆盖元素来实现：overflow:hidden：扩展的字母形状是使用 SVG 创建的，并隐藏在左侧 div 的下方。当用户调整窗口大小时，右侧 div 滑出，露出细长的部分。例如。

<div id="clipper">
 <svg id="leftpart" x="0px" y="0px" width="30px" height="150px">
  <rect x="0" y="0" width="30" height="150" fill="red"/>
 </svg>

 <svg id="rightpart" x="0px" y="0px" width="2000px" height="150px">

     <rect  x="0" y="0" width="2000" height="30" fill="black"/>
     <rect  x="0" y="60" width="2000" height="30" fill="black"/>
     <rect  x="0" y="120" width="2000" height="30" fill="black"/>
 </svg> 
</div>


#clipper{
  position: absolute;
  top:200px;
  left:200px;
  width:40%;
  overflow: hidden;

}

#rightpart {
  position: relative;
  z-index:1;
}

#leftpart {
  position: absolute;
  z-index:2;

}