图片 css 剪切_结合CSS剪切路径和形状以实现新的布局可能性

图片 css 剪切

Recently I’ve been thinking about how pages might start to break out of the “boxes inside boxes” trope that’s built up in web design over the past few years. One way to break through limitations is to merge two different creative possibilities: in this case, CSS clip-path and the Shapes module.

最近，我一直在思考页面如何开始摆脱过去几年在Web设计中建立的“盒子里的盒子”字样。 突破限制的一种方法是合并两种不同的创意可能性：在这种情况下，是CSS clip-path和Shapes模块。

新剪辑 (The New Clip)

clip-path, inherited from SVG, is used to mask content on web pages. The old clip syntax had several significant limitations - clipped elements had to be absolutely positioned, and could only be clipped into rectangular shapes - and has been superseded by this new specification. clip-path opens the specification to arbitrary shapes (including circles, ellipses, and free curves), and places no restrictions on the size, flexibility, or position of content.

继承自SVG的clip-path用于屏蔽网页上的​​内容。 旧的clip语法有几个重要的限制-裁剪的元素必须绝对定位，并且只能裁剪成矩形形状-并已被新的规范取代。 clip-path将规范打开为任意形状(包括圆形，椭圆形和自由曲线)，并且对内容的大小，灵活性或位置不加限制。

CSS clip-path Maker CSS剪切路径制作器中掩盖的图像

The easiest way to start playing with clip-path is by using Bennett Feely’s excellent “Clippy” tool. One restriction is that you cannot upload images to the app; instead, you must provide an external URL. I’ve provided a copy of the image used in the example above.

开始使用clip-path的最简单方法是使用Bennett Feely出色的“ Clippy”工具 。 一个限制是您不能将图像上传到应用程序； 相反，您必须提供一个外部URL。 我提供了上面示例中使用的图像的副本 。

There’s an infinite number of possible clipping areas; for this image, I chose “Triangle” in Bennett’s tool and moved the points around to the positions shown in Figure 1.

有无限数量的可能的裁剪区域。 对于此图像，我在Bennett的工具中选择了“三角形”，并将这些点移动到图1所示的位置。

The complete code for the effect is shown at the bottom of the app window. Note that it provides a -webkit- vendor prefix; right now, clip-path is only supported in Webkit-derived browsers, and Safari still requires prefixes. We’ll get to making the clip effect work in Firefox and other browsers in a moment.

效果的完整代码显示在应用程序窗口的底部。 注意，它提供了-webkit-供应商前缀。 目前，仅在Webkit衍生的浏览器中支持clip-path ，而Safari仍然需要prefixs 。 稍后，我们将使剪辑效果在Firefox和其他浏览器中起作用。

Adding the image to a page, we can apply an id attribute, together with some filler text:

将图像添加到页面上，我们可以应用id属性以及一些填充文本：

<img src="vapor-cone.jpg" alt id="penetrator">
<h1>The Need For Speed</h1>
<p>The urge to go faster than the speed of sound is probably as old as Kitty Hawk, as old as mankind’s first realization that there was a barrier to break.

And then some CSS:

然后是一些CSS ：

img#penetrator {
	width: 50%;
	float: left;
	-webkit-clip-path: polygon(24% 0, 24% 100%, 100% 54%);
	clip-path: polygon(24% 0, 24% 100%, 100% 54%);
}

Note that the points of the clip-path are specified in a counter-clockwise direction from the top point, and are measured in percentages. (Pixels are also a possibility, but using percentages means that this effect will scale with the fluid image).

注意，剪切路径的点是从顶部开始沿逆时针方向指定的，并以百分比为单位。 (像素也是有可能的，但是使用百分比意味着此效果将随流体图像缩放)。

shape-outside shape-outside

Contrary to expectations, clip-path does not alter an element’s relationship to the rest of the page; the clipping area affects only the image, and the filler text wraps around it as if it’s still its original shape. To fix that, we need to use a separate CSS module.

与期望相反， clip-path 不会改变元素与页面其余部分的关系 ； 剪切区域仅影响图像，填充文本将其环绕，好像它仍是其原始形状一样。 要解决此问题，我们需要使用单独CSS模块。

塑造波浪 (Shaping The Wave)

In previous articles I’ve shown how to use CSS Shapes to wrap text around circular elements, as well as curved images. In this case, we’re using a polygon shape: and, in a burst of logic, the shape-outside property takes exactly the same values as clip-path to map a polygonal area:

在先前的文章中，我展示了如何使用CSS Shapes 将文本包裹在圆形元素和弯曲图像 周围 。 在这种情况下，我们使用的是多边形形状：逻辑上， shape-outside属性采用与clip-path完全相同的值来映射多边形区域 ：

img#penetrator {
	width: 50%;
	float: left;
	-webkit-clip-path: polygon(24% 0, 24% 100%, 100% 54%);
	clip-path: polygon(24% 0, 24% 100%, 100% 54%);
	shape-outside: polygon(24% 0, 24% 100%, 100% 54%);
}

The result matches the clipping path to the shape wrap, but clings the text very closely to the image; the shape itself also looks a little strange just hanging out on the page. In the example, I’ve fixed this by adding a negative margin-left value to the image. This brings the clip-path out of alignment with the wrapping shape, but the result works in this case.

结果使剪切路径与形状环绕相匹配 ，但使文本非常紧贴图像。 形状本身在页面上闲逛也显得有些奇怪。 在示例中，我通过向图像添加负的margin-left值来解决此问题。 这会使clip-path与包装形状不对齐，但是在这种情况下，结果仍然有效。

使效果可以在浏览器中工作 (Making The Effect Work Across Browsers)

shape-outside can be polyfilled, as discussed in a previous article. To support the clip-path in other browsers, we turn to the SVG standard it was derived from. On the same page, write a small inline SVG:

如上一篇文章中所述，可以对shape-outside进行填充。 为了支持其他浏览器中的clip-path ，我们转向其衍生的SVG标准。 在同一页面上，编写一个小的内联SVG：

<svg id="svgpath">
	<defs>
		<clipPath id="delta" clipPathUnits="objectBoundingBox">
			<polygon points=".24,0 .24,1 1,.54" />
		</clipPath>
	</defs>
</svg>

I’ve talked about clipPath previously; in this case, we want to make the SVG clipping path responsive, so we use clipPathUnits="objectBoundingBox". The SVG thinks of itself as a 1 × 1 box, so the clipping polygon takes the same value as clip-path, divided by 100.

我之前已经讨论过clipPath ； 在这种情况下，我们要使SVG剪切路径具有响应性，因此我们使用clipPathUnits="objectBoundingBox" 。 SVG认为自己是一个1×1的盒子， 所以裁剪多边形的取值与clip-path相同，除以100 。

This SVG method is a fallback for clip-path, but it goes first in the CSS declaration for the image:

此SVG方法是clip-path的后备方法，但在图像CSS声明中首先出现：

img#penetrator {
	width: 50%;
	margin-left: -12%;
	float: left;
	clip-path: url(#delta);
	-webkit-clip-path: polygon(24% 0, 24% 100%, 100% 54%);
	clip-path: polygon(24% 0, 24% 100%, 100% 54%);
	shape-outside: polygon(24% 0, 24% 100%, 100% 54%);
}

Note that the URL-based clip-path references the id of the clipPath element, not the id of the root SVG. #svgpath is used simply to size the element, since it will otherwise take up space on the page:

请注意，基于URL的clip-path引用id的的clipPath元素，而不是 id根SVG的。 #svgpath仅用于确定元素的大小，因为否则它将占用页面上的空间：

svg#svgpath {
	width: 0; height: 0;
}

The result - a combination of two different CSS modules - breaks text out of boxes, making for the possibility of powerful and unique art-directed pages.

结果-结合了两个不同CSS模块-使文本开箱即用，从而使功能强大且独特的艺术指导页面成为可能。

翻译自: https://thenewcode.com/1007/Combining-CSS-clip-path-and-Shapes-for-New-Layout-Possibilities

图片 css 剪切