特殊形状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%);
}

用到的核心属性

 clip-path: polygon

polygon( , , …, ) 定义了每一个点的坐标，

CSS 代表一种基本图形，它通过图形函数来定义一个图形。一个基本图形可以作为shape-outside属性，或clip-path属性的参数使用，经这些属性应用在一个元素上，可以使这个元素周围的内容环绕在它的周围，或者使用指定的图形来剪裁内容。

polygon()函数的语法如下：

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

polygon()函数用于定义一个多边形。它的参数是一组坐标对（ ），每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形。坐标对使用逗号来进行分隔，可以使用绝对单位或百分比单位值。

除了坐标对参数，polygon()函数还可以使用一个可选的关键字fill-rule。该关键字指定如何处理可能相交的多边形形状的区域。可取值有nonzero 和evenodd。默认值为nonzero。

下面都是有效的polygon()函数声明。

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, ...);