Get into the habit of writing together! This is the first day of my participation in the "Nuggets Daily New Plan·April Update Challenge", click to view the details of the event
I am participating in the Nuggets experience event on the code, details: show your creative code blocks
Haven’t been participating in a creative game activity recently? I wondered if I could use CSS to combine some beautiful effects, such as a hollow ring, or a fan shape, so I went to the Internet to search for tutorials, and I searched Google and Baidu. I haven't been able to find the results I want. Maybe this demand is really small, or maybe my search posture is wrong. All I found are using blindfolds to achieve the corresponding effect, which is not what I want at all. I suddenly remembered that I dug a while ago Jin gave a copy of Zhang Xinxu's css new world, so he went through the contents of the book and found a solution, which is to use powerful clip-pathattributes. Let's take a look at how this attribute can be realized. the desired effect.
This article only describes how to use
clip-pathit to achieve the effect we want, and will notclip-pathexplain other properties. If you are interested, you can search and learn by yourself.
Let’s talk about how the traditional way of making a fan is made. The method I learned from the Internet uses border-radiusattributes to draw two semicircles, and then rotates one of the semicircles to achieve the desired effect, like the following
When the fan angle is greater than 180 degrees, the color of our second semicircle should be the same as the color of the first circle to form an extended effect. If the fan angle is less than 180 degrees, the color of our second semicircle will be To be the same color as the background, here the color of the second circle is light blue and light gray for everyone's understanding.
It can be seen that there is no problem with the fan shape greater than 180 degrees, but the angle less than 180 degrees requires that our background color must be a solid color, and the background color must remain unchanged, clip-pathso how does our protagonist achieve it?
clip-pathThere are several methods. Today we are using polygon clipping polygon. The use of this property is very simple. Just set each node of the graph you want to clip, and CSS will connect the points you set, leaving only the The graph that exists in the lower connection line, like the following
width: 100px;
height: 100px;
background: green;
clip-path:polygon(0% 0%, 50px 0, 50px 50px, 0 0);
复制代码So what if it is a fan shape? At this time, we can draw a circle, and then we can cut the graphics we want, just like the following (the collection code block will be placed later), we first draw a circle, and then go to Crop an area in the upper left corner (light blue), then the overlapping part of the crop area and the background area will remain (sector shape)
As for how to make a hollow fan shape, it is also very simple. We can change the background color of the circle to a border, as shown below, draw a border, and then crop the position of the upper left corner, and the overlapping part of the border and the cropping area is will stay.
Put a block of code below
This little knowledge point has been introduced. It may be used by few people, but it is better than nothing.