clip-path represents a clipping path
Syntax clip-path: <clip-source> | [<basic-shape> || <geometry-box>] | none
clip-source: may be within, URL <clip-path> SVG element external reference
basic-shape: Some basic shape function to create a shape. Including circle (), ellipse (), inset () and Polygon ()
Geometry-Box: is an optional parameter. When used with this parameter and the basic-shape function, the box may be provided with reference to the basic-shape cutting work.
If specified by the geometry-box itself, it uses the specified path as the box-shaped cut, including any shape (supplied by border-radius) angle
eg.
<style>
.box{
width: 500px;
height: 500px;
background-color: lightblue;
border: 5px solid gray;
clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%, 0 70px)
}
</style>
<body>
<div class="box">
</div>
</body>
Crop effect is as follows:
Description: Data "()" represents, clipping border node coordinate position, clockwise, to link these points is the cutting edge of the border, is the plane figure surrounded by clipping region
coordinates of the upper left corner as the origin
Learning site: https://www.w3cplus.com/css3/introducing-css-clip-path-property.html