javascript - 排版的某些部分(字母)响应窗口的宽度/高度？

Question

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

我想知道字母 O、U 和 E 的某些水平部分是否可以响应窗口的宽度同时保持其位置？在下图中，我画出了响应式排版如何对窗口比例使用react。请注意，集类型放置在换页内并垂直放置在窗口中间。

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

提前致谢!

Answer 1

您只需在 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;

}