clip-path

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切 clip属性。

用法如下：

/* 多边形，绘画点的位置，坐标，注意起始位置和途径位置绘画 */
/* clip-path: polygon(0 10%, 0 90%, 100% 90%, 100% 10%); */
/* 矩形，距离上面的距离，距离右边的距离，距离下面的距离，距离左边的距离 round 圆角，能够写百分数 */
/* clip-path: inset(20px 30px 20px 10px round 20px); */
/* 圆，半径 at 横纵坐标，能够写百分数 */
/* clip-path: circle(30% at 150px 120px); */
/* 椭圆，长半轴 短半轴 at 横坐标 纵坐标，能够写百分数和像素 */
/* clip-path: ellipse(45% 30% at 50% 50%); */

利用clip-path花扇形：

    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            border-radius: 50px 50px 0px 0px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <script>
        let x = 50/Math.sqrt(3);
        document.querySelector('.div1').style.clipPath = `polygon(50% 100%, ${50-x}px 0px, ${50+x}px 0px)`;
        let y = 50-Math.sqrt(3)*50;
        document.querySelector('.div2').style.clipPath = `polygon(50% 100%, 0px ${y}px, 0px 50px)`;
        document.querySelector('.div3').style.clipPath = `polygon(50% 100%, 100px ${y}px, 100px 50px)`;
    </script>
posted @ 2020-10-03 19:39  小默同学  阅读(223)  评论(0)  编辑  收藏  举报