Special shape div

<div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543989728406&di=76b777451f222733dfd6e63923cdec5a&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F80cb39dbb6fd5266fcbeafe1a118972bd50736a9.jpg" alt="">
</div>

* {
    
    
    padding: 0;
    margin: 0;
}
div {
    
    
    float: left;
    background-color: wheat;
}
img {
    
    
    float: left;
    width: 300px;
    height: 300px;
    clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Insert picture description here
Core attributes used

 clip-path: polygon

polygon(,, …,) defines the coordinates of each point,

CSS stands for a basic graphic, which defines a graphic through graphic functions. A basic graphic can be used as a parameter of the shape-outside attribute or the clip-path attribute. After these attributes are applied to an element, the content around the element can be wrapped around it, or the specified graphic can be used to clip the content.

The syntax of the polygon() function is as follows:

polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
/* 其中.. */
<shape-arg> = <length> | <percentage>

The polygon() function is used to define a polygon. Its parameter is a set of coordinate pairs (), each coordinate pair represents a vertex coordinate of the polygon. The browser will connect the last vertex and the first vertex to get a closed polygon. Coordinate pairs are separated by commas, and absolute or percentage unit values can be used.

In addition to the coordinate pair parameters, the polygon() function can also use an optional keyword fill-rule. This keyword specifies how to deal with areas of polygonal shapes that may intersect. Possible values are nonzero and evenodd. The default value is nonzero.

The following are all valid polygon() function declarations.

polygon(0 0, 100% 100%, 0 100%);
 
polygon(0 0, 100% 100%, 0 100%);
 
polygon(50px 0px, 100px 100px, 0px 100px);
 
polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, ...);

Insert picture description here

Guess you like