In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
Today, I would like to share with you the relevant knowledge points of CSS borderless cutting path example analysis, detailed content and clear logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
Before going any further, we should take a look at the basic shapes and clip-path. Cropping paths can apply CSS Shapes such as circle (), ellipse (), inset (), or freely changing polygon () to any element. Anything in the element that is not within the boundary of the shape will be cropped and deleted.
Using polygon functions, we can create triangles, stars, or other shapes, although we can use fixed units such as px, but the percentage will provide more flexibility and adapt to the size of the element.
So for an octagon, we can set eight sets of x, y point coordinates to define it. In this case, for the first x, we start with 30% of the width of the box, and for y, we start at the top of the box, and then set the points clockwise. The visible area is the shape formed by connecting these points in a straight line.
Clip-path: polygon (
30% 0%
70%
100% 30%
100% 70%
70% 100%
30% 100%
0% 70%
0% 30%
)
An invisible vertex
The above implements an octagon, and we set the coordinates of eight points. However, we can think outside the limits of the element box, that is to say, out of the 0%-100% range.
The box border of the element is the display boundary of the cropped content, but we can still define points beyond the box border for the element.
By defining points in the 100% range of 0% copyright, we can turn a polygon with three points into a quadrilateral, pentagonal, or hexagonal. In this example, there are all three points that define the clip-path: polygon () function, but by going beyond the boundaries of the element box, we can see a triangle and two pentagons.
Therefore, the above octagon can be realized with only four points.
One crop path, multiple shapes
We can take advantage of this ability to go beyond the boundaries of elements to create multiple crop shapes with a single polygon ().
According to the location of the element, we can make each shape directly, but because we know that the crop coordinate point can move in the space outside the element box, we can draw extra lines to help us find the location of the next point.
It can also help us split the elements. Combined with the CSS custom attributes, we can handle overlapping elements and crop each element into alternating stripes. The following example is two overlapping rounded rectangles, each divided into irregular rectangular animations.
Different filling rules, different shapes.
The polygon () function is not just a collection of coordinate points, it also has another parameter-the filling rule. The default value we've been using is nonzero, and it has another value, evenodd, which determine the internal and external rules of the shape are different.
When using the evenodd rule, we can determine whether the point is inside or outside the boundary by drawing light from any point. If the sum of the light passing through the crop line is even, the point is considered external, and if the sum of the light passing through the crop line is odd, the point is inside.
Sequence
It is important to note that many CSS attributes, such as CSS Filters, Blend Modes, and so on, affect the appearance of the element. These effects are applied to the elements in the following order:
CSS Filters (for example, filter: blur (2px))
Clipping (discussed in this article)
Masking (similar to cropping)
Blend Modes (for example, mix-blend-mode: multiply)
Opacity
If we need a blurred star shape, the blur effect will occur before cropping. Because the blur effect references the border of the element, but we cut off the border of the element, so the blur effect of the previous star will be lost.
If we want to blur the stars, we can choose to wrap the clipped elements in the blurred parent elements. The inner element will first render the shape of its star, and then the parent element will normally blur its contents.
Display content through animation
CSS Shapes can add animation effects, which allows us to change the visual area of an element without affecting the content of the element. For example, we can start with content hiding (fully cropping) and increase the clipping path to show the content. Note that an important condition for the clip-path: polygon () animation shape is that the number of coordinate points and fill rules must be the same for each Keyframe. Otherwise, the browser will not have enough information to insert the intermediate value.
These are all the contents of the article "case Analysis of clipping paths without boundaries in CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 301
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.