html - 我们可以在剪辑 css 中使用百分比吗？

Question

想要在这个 css 中的用户百分比

clip: rect(0px,400px,800px,0px);

我想以百分比而不是像素给出大小来处理移动视图。

标签： htmlcss

Answer 1

除了使用clip已弃用的属性，您可以使用该clip-path属性，并使用 a polygon（甚至是 SVG）。对于多边形，您可以x y成对定义它的坐标：0 0将是左上角，100% 0将是右上角，等等。

以这个例子为例，它将方形 div 裁剪为 65% 的宽度和 30% 的高度。

div { margin: 10px; background: #0095ee; border: 10px solid #000; }
#a { width: 100px; height: 100px; } #b { width: 200px; height: 200px; }

div {
  clip-path: polygon( 0 0, 65% 0, 65% 30%, 0 30% );
}

<div id="a"></div>
<div id="b"></div>