css - 仅显示前 25% 的块

Question

我有使用 css3 生成的某些形状。我只想显示块的一部分，例如：上方的 25% 或底部的 25%。我如何实现这一目标？

例如：在http://jsfiddle.net/HNyHM/1/中；我只想从上面显示 25%。

Answer 1

检查这个。http://jsfiddle.net/LB8mC/

将你的 CSS 形状包裹在一个 div 中，给它高度、宽度，正是你想要显示形状的程度。然后相对于包装纸绝对定位形状。

这是我在小提琴中使用的。

  .shape-wrapper {
        position:relative;
        overflow:hidden
        height: 25px;
  }



  .shape-wrapper > div {
        top: -25px;
        left: -25px;
     }

您可以继续更改子 div 的位置（前 25% 或后 25%，就像您使用 JS 所要求的那样。

Answer 2

添加包装器 div 可能会有所帮助。不过，请参阅http://jsfiddle.net/HNyHM/3/以获取固定大小的开始。