Deep understanding of the clip-path of CSS3

1. Brief description

The clip-path CSS property can create a clip area where only part of the element can be displayed (without changing the position of the clip area in the entire picture), part of the area is displayed, and hidden outside the area. The clip-path attribute replaces the now-deprecated clip attribute. The attribute values of clip-path can be the following:

The clip-path attribute value is inset;
inset is to cut the element into a rectangle, such as clip-path: inset (10px), the value in parentheses is similar to the writing of margin and padding values, you can write a value, you can write more Values.
The clip-path attribute value is circle;
circle is to cut the element into a circle, such as clip-path: circle (100px at 50% 50%), 100px represents the diameter of the circle, 50% 50% represents the center of the circle.
The clip-path attribute value is ellipse;
circle is to cut the element into an ellipse, such as ellipse (150px 100px at 50% 50%), 150px represents the horizontal radius of the ellipse, 100px represents the vertical radius of the ellipse, 50% 50% represents Center of circle.
…

There can also be a variety of clip-path, such as polygon, path, svg, etc. More reference: clip-path ;

2. Examples

For example: draw a triangle

.main {
			width: 60px;
			height: 60px;
			background: red;
			clip-path: polygon(50% 0,0 100%, 100% 100%);
		}

Of course, we can also use the clip-path generator to get more and more fun cutting graphics, as shown below:
Insert picture description here

Three. Clip-path transition animation

clip-path Another powerful feature is that CSS transtion can be used in conjunction with CSS animation

Example: polygon graphics animation

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                clip-path动画-多边形
            </title>
            <style>
                .polygon-animate {
				    position: absolute;
				    width: 200px;
				    height: 200px;
				    top: 50%;
				    left: 50%;
				    transform: translate(-50%, -50%);
				    background-color: crimson;
				    animation: polygon-ani 5s linear infinite;
				}
				@keyframes polygon-ani {
					0% {
						clip-path: polygon(
				        50% 0%,
				        0% 100%,
				        100% 100%,
				        100% 100%,
				        100% 100%,
				        100% 100%,
				        100% 100%,
				        100% 100%,
				        100% 100%
				    );
					}
				    20% {
				        background-color: darkorange;
				        clip-path: polygon(
				            50% 0%,
				            100% 50%,
				            50% 100%,
				            0% 50%,
				            0% 50%,
				            0% 50%,
				            0% 50%,
				            0% 50%,
				            0% 50%
				        );
				    }
				    40% {
				        clip-path: polygon(
				            50% 0%,
				            100% 38%,
				            82% 100%,
				            18% 100%,
				            0% 38%,
				            0% 38%,
				            0% 38%,
				            0% 38%,
				            0% 38%
				        );
				    }
				    60% {
				        background-color: lemonchiffon;
				        clip-path: polygon(
				            50% 0%,
				            100% 25%,
				            100% 75%,
				            50% 100%,
				            0% 75%,
				            0% 25%,
				            0% 25%,
				            0% 25%,
				            0% 25%
				        );
				    }
				    80%,100% {
				        clip-path: polygon(
				            50% 0%,
				            90% 20%,
				            100% 60%,
				            75% 100%,
				            25% 100%,
				            0% 60%,
				            10% 20%,
				            10% 20%,
				            10% 20%
				        );
				    }
				}
            </style>
        </meta>
    </head>
    <body>
        <div class="polygon-animate">
        </div>
    </body>
</html>

Insert picture description here

For example: graphics transformation animation

Benjaminpcm

Published 398 original articles · Liked 182 · Visits 370,000+

His message board concerns