This is the 18th day of my participation in the August Challenge

Question origin

The problem originated from the clip-path CSS property introduced in the book CSS Secret I read recently. I have never heard of this property, so I did a little research on it.

Clip-path, MDN Documentation link: developer.mozilla.org/zh-CN/docs/…

Official website interpretation:

The CSS property uses clipping to create the displayable area of the element. The part inside the region is displayed, and the part outside the region is hidden.

How to understand this? What are the clip-path values?

A variety of clipping values

The value can be based on the box model

According to the example given by MDN, we can take: margin-box, border-box, padding-box, content-box, etc., the meanings of each value are shown in the following figure:

function

The clip-path range is defined as

in MDN, which translates as < geometry box > in Chinese.

Functions include: inset(), circle(), ellipse(), polygon(), path().

This article is titled “How to draw pentagons”, that is, how to draw complex polygons, using the function polygon().

Polygon is a function used to draw two-dimensional polygons.

How do you use polygon to draw polygons in CSS?

polygon

First look at the official website:

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

Each pair of arguments in the list represents the coordinates of the vertices of the polygon, xi and yi, and I represents the number of vertices, i.e., the ith vertex.

How to understand this sentence? Let’s look at an example:

<! DOCTYPEhtml>
<title>Clip - path cutting</title>
<body>
    <div class="box">
    </div>
</body>
<style>
    .box {
        width: 876px;
        height: 576px;
        background: url('https://cdn.pixabay.com/photo/2018/01/12/10/19/fantasy-3077928_960_720.jpg') no-repeat;
        background-size: 100% 100%;
        /* clip-path: polygon(50% 0, 50% 50%, 0 50%, 0 0); * /
    }
</style>
</html>
Copy the code

After commenting out the clip-path line, the complete presentation style is shown below:

What does the diagram look like when we uncomment it?

You can see that only the upper left quarter of the image is left, and everything else is cropped out. Polygon arguments are polygon vertex coordinates:

clip-path: polygon(x1 y1, x2 y2, x3 y3, ....)
Copy the code

The pentacle is easy to understand, as long as the coordinates of its 10 vertices are given.

clip-path: Polygon (50%, 2.4% and 34.5% 33.8%, 0%, 38.8% and 25% 63.1%, 19.1% 97.6%, 50%, 81.3%, 97.6%, 80.9% 75% 63.1% and 100% 38.8%, 65.5% 33.8%);Copy the code

The effect is shown below:

If the shape is square, it works even better.