css 使用polygon() 裁剪多边形使用css polygon()函数裁剪一个小狐狸；介绍：polygon()函

使用polygon裁剪

polygon()函数接收一组坐标对，每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形;

多边形必须至少绘制一个三角形

坐标对参数单位可以使用百分比或者px、em、rem

关于值定位

可以参考这个网站：bennettfeely.com/clippy/

1、html代码

现在有一个div, 并设置一张背景图

2、三角形

裁剪成三角形;

 clip-path: polygon(100% 0%, 10% 0%, 40% 100%);

3、五角星

clip-path: polygon(50% 0%, 20% 80%, 100% 35%, 0 35%, 80% 80%);

使用polygon裁个狐狸

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main{
            display: flex;
            width: 400px;
            height: 400px;
        }
        .head{
            position: relative;
            display: flex;
            width: 150px;
            height: 200px;
            background-color: #b97a57;
            clip-path: polygon(20% 1%,
                               1% 21%,
                               40% 60%,
                               80% 21%,
                               60% 1%,
                               40% 21%);
        }
        .fox_body{
            width: 120px;
            height: 120px;
            background-color: #b97a57;
            clip-path: polygon(0 0, 0 100%, 100% 100%);

            margin-top: 16%;
            margin-left: -12%;
        }
        .tail{
            width: 110px;
            height: 110px;
            background-color: #b97a57;

            clip-path: polygon(0% 100%, 80% 70%, 100% 0, 35% 20%);

            margin-left: -9%;
            margin-top: 10%;
        }

        .eye{
            width: 40px;
            height: 40px;
            background-color: black;
            clip-path: circle(20.6% at 50% 50%);

            /*display: inline-block;*/
            vertical-align: middle;
            position: absolute;
            top: 36px;
            left: 18px;
        }
        .nose{
            width: 50px;
            height: 50px;
            background-color: black;
            clip-path: ellipse(30% 18% at 50% 50%);

            position: absolute;
            bottom: 33%;
            left: 24%;
        }
    </style>
</head>
<body>

<div class="main">
    <div class="head">
        <div class="eye"></div>
        <div class="eye" style="right: 47px;left: initial"></div>
        <div class="nose"></div>
    </div>

    <div class="fox_body"></div>
    <div class="tail"></div>
</div>

</body>
</html>