Use clip-path to draw various graphics

Basic introduction to clip-path

clip-pathIt is a CSS property, clipping path, which allows different clipping methods to create the displayable area of ​​the element, the content in the area can be displayed, and the content outside the area is hidden.
Basic syntax: clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none.

Among them, attribute values ​​are divided into four categories:

• clip-source references the element using
  the class function .url()SVG<clipPath>
• basic-shape
  Some basic shapes, using class function to create a shape, possible values ​​include: circle (circle), ellipse (ellipse), polygon (polygon), rectangle (inset), arbitrary path (path).
• geometry-box
  is optional; this attribute value must work with basic-shapethe attribute value to provide a reference box for the clipping shape, and the default value is border-box.
  There are some problems with the compatibility of this attribute, and it cannot be used normally under the chrome browser, so use it with caution .
• 
  The default value of none none, in addition, there are CSS global values ​​such as inherit, and so on.initial

Use as follows,

<div class="app"></div>

.app {
    
    
  display: inline-block; 
  position: relative; 
  width: 200px;
  height: 200px;
  background-color: #333;
  clip-path: circle(50%); 
}

The above code will set a circular clipping area with a black-gray background color for .appthe element :

Draw graphics using clip-path

The above code and picture show a circular shape, based on the value clip-pathof the shape attribute basic-shape.
Next, let's first understand the basic usage basic-shapeof :

• Circle circle()
  Accept a radius length and center position information, cut into a circle
• Ellipse ellipse()
  Accept two radius lengths and center position information, cut into an ellipse
• Polygon polygon()
  accepts a set of vertex position information and cuts it into a polygon shape
• Rectangle inset()
  accepts the offset values ​​of the top, right, bottom, and left directions, and can also set rounded corners and cut them into rectangles
• Arbitrary Paths path()
  accepts SVG path strings, cut into different shapes

With these basic shape functions, we can create a variety of graphics.

implement a triangle

Use the polygon attribute value polygonto realize a triangle, only need to set three coordinate point parameters, and you can easily create a triangle shape.

<div class="triangle"></div>

.triangle {
    
    
  display: inline-block; 
  position: relative; 
  width: 200px;
  height: 200px;
  background-color: #f00;      
  animation: triangle 8s linear infinite;
}
@keyframes triangle {
    
    
  0% {
    
    
    clip-path: polygon(100px 0px, 200px 200px, 0px 200px);
  }
  25% {
    
    
    clip-path: polygon(200px 100px, 0px 200px, 0px 0px);
  }
  50% {
    
    
    clip-path: polygon(100px 200px, 0px 0px, 200px 0px);
  }
  100% {
    
    
    clip-path: polygon(0px 100px, 200px 0px, 200px 200px);
  }
}

As shown in the above code, the animation effect of the triangle in four directions is realized, and it is rotated clockwise four times, and displayed in turn:

In the future, if the code wants to implement the triangle corner mark, it can be used.

In addition polygonto , paththe triangle can also be realized by using the attribute value. The following code realizes a triangle:

clip-path: path("M100,0 L0,200 L200,200");

And if you want to use pathto achieve the same circle, you can also, the code is as follows:

clip-path: path("M 100 0 A 100 100 0 1 1 100 200 A 100 100 0 1 1 100 0");

To achieve an arrow effect

Also use the polygon attribute value polygon, set the coordinate vertex data required by the arrow, and then you can simply draw an arrow.

.arrow {
    
    
  display: inline-block; 
  position: relative; 
  width: 200px;
  height: 200px;
  background-color: #f00;
  clip-path: polygon(40% 0%, 40% 30%, 100% 30%, 100% 70%, 40% 70%, 40% 100%, 0% 50%);
}

The above CSS code, the relative value of the percentage used for the vertex value of the polygon, is also valid, and the arrow shown in the figure below is drawn:

It is also possible to use paththe attribute value to realize the arrow. The following CSS code is to realize the same arrow shape as the above picture:

clip-path: path("M 80 0 L 80 60 L 200 60 L 200 140 L 80 140 L 80 200 L 0 100");

To set a different direction, just adjust the vertex coordinates.

Implement an × symbol

Using it ×as the close button icon symbol is also our common UI style, and clip-paththe symbol shape can also be easily realized through the attribute.

.triangle {
    
    
  display: inline-block; 
  position: relative; 
  width: 20px;
  height: 20px;
  background-color: #f00;      
  clip-path: polygon(10% 0%, 0% 10%, 40% 50%, 0% 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 60% 50%, 100% 10%, 90% 0%, 50% 40%);
}

It is still defined by polygons, as long as the corresponding position information is set ×along each vertex, the effect can be seen in the figure below:

Here is the implementation pathof :

clip-path: path("M 2 0 L 0 2 L 8 10 L 0 18 L 2 20 L 10 12 L 18 20 L 20 18 L 12 10 L 20 2 L 18 0 L 10 8");

The realization of the shape is here first. Anyway, as long as we are willing to spend time, we can always clip-pathcreate the shape we want. Let's look at other usages below.

Precautions

shadows and borders

Note that when using clip-pathto define a shape, attributes such as borderborder and box-shadowshadow are not processed. For example, when creating a circle, border-radiusthe difference with is obvious.
Let's implement two circles respectively:

.circle {
    
    
  display: inline-block; 
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border: 3px solid red;
  box-shadow: 0px 0px 10px #00f;
}
.circle1 {
    
    
  clip-path: circle(50%);
}
.circle2 {
    
    
  border-radius: 50%;
}

As can be seen from the figure above, when
using , the frame shadow follows the circle and is completely displayed; while using is completely different, the shadow is not displayed, and the frame is also cut to display 4 segments.border-radius
clip-path

fixed positioning problem

When using clip-pathto cut the parent element, if fixedthe internal element positioned by is used, it will not be displayed after leaving the scope of the current parent element.
Using the same code above, we make some changes in the html:

<div class="circle circle1">
  <div class="text">clip-path</div>
</div>
<div class="circle circle2">
  <div class="text">border-radius</div>
</div>

To define a css property for a text string, use fixedpositioning :

.text {
    
    
  position: fixed;
  top: 230px; 
}

The obtained effect picture is as follows, the text cannot be displayed in clip-paththe clipping , and border-radiusthe text is displayed completely in the .

Animation problem

In the above code, we have animationused and the performance is normal, but we need to pay attention to:

• In a @keyframessetting , if clip-paththe attribute is used, its attribute value should use the same function, that is, both must be used polygon;
• You cannot use one time period polygonover another path, and if you do, there will be no animation.

That is, the following writing is not allowed:

/** polygon 函数与 path 函数同在一个动效中使用，将不会有动画效果，只会生硬的切换 */
@keyframes triangle {
    
    
  0% {
    
    
    clip-path: polygon(100px 0px, 200px 200px, 0px 200px);
  }
  50% {
    
    
    clip-path: path("M 200 100 L 0 200 L 0 0");
  }
}

The same problem will also exist when using transitionto deal with animation effects. Let's look at a specific example below.

<img class="img" src="../css项目/animate.jpg"/>

.img {
    
    
  clip-path: circle(50%);
  transition: all 1s;
}
.img:hover {
    
    
  clip-path: circle(100%);
}

When we use circleto cut , hoverand use this function in the state, the effect is normal:

However, when hoverwe use noneor other functions in the state, there is no dynamic effect, just switch directly:

.img:hover {
    
    
  clip-path: none;
}

As shown in the figure above, compared with the previous normal animation effect, this time it is a direct switching state without animation effect.

Other uses of clip-path

In addition to creating different shapes, using clip-paththe attribute can also be used in other ways, such as as a picture cropping box, hiding page elements, and so on.

picture cropping box

The specific implementation of image cropping has been introduced in previous blog posts. The implementation method at that time was to use clip-paththe attribute to define the image cropping frame, and use JavaScript to dynamically modify the positioning position information to modify the size and position information of the cropping frame in real time.
For the specific code, see Implementing the cropping function step by step .

hide page elements

According to the above understanding of clip-paththe attribute , we know that the content within the clipping shape area is visible, and the content outside the clipping area is not visible.
If we set the clipping area of ​​an element to 0, all content of the element will be outside the area, that is, invisible, and it is very simple to implement.

clip-path: circle(0%);
clip-path: inset(50%);
clip-path: polygon(0 0);

Use different shape function values, as long as there are no clipping regions.
Of course, hidden this way, the element will still occupy its current space on the page, it's just not visible visually.