CSS中的路径裁剪样式clip-path的详细使用

看html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <style>

        .outer {
            width: 100px;
            height: 100px;
            background: orange;
            clip-path: circle(50% at 50% 50%)
        }
    </style>

    <div class="outer" style="float:left;"></div>
    <div style="float:left;margin-left:20px;">
        <select name="tx">
            <option value="0">请选择图形</option>
            <option value="圆形">圆形</option>
            <option value="椭圆">椭圆</option>
            <option value="矩形">矩形</option>
            <option value="三角形">三角形</option>
            <option value="菱形">菱形</option>
            <option value="梯形">梯形</option>
            <option value="平行四边形">平行四边形</option>
            <option value="五边形">五边形</option>
            <option value="六边形">六边形</option>
            <option value="七边形">七边形</option>
            <option value="八边形">八边形</option>
            <option value="斜角">斜角</option>
            <option value="槽口">槽口</option>
            <option value="左箭头">左箭头</option>
            <option value="右箭头">右箭头</option>
            <option value="星星">星星</option>
            <option value="十字架">十字架</option>
            <option value="叉号">叉号</option>
            <option value="对话框">对话框</option>
            <option value="鼠标移入时开始变形">鼠标移入时开始变形</option> 
        </select>
    </div>
    <script  src="js/jquery-2.1.0.js"></script>
    <link href="css/txcss.css" rel="stylesheet" />
    <script  src="js/txjs.js"></script>
</body>
</html>

css代码：

/*圆形*/
.circle {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: circle(50% at 50% 50%)
}
/*椭圆形*/
.ellipse {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: ellipse(25% 40% at 50% 50%);
}
/*矩形*/
.inset {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: inset(5% 20% 15% 10%);
}
/*三角形*/
.sanjiaoxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/*菱形*/
.lingxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/*梯形*/
.tixing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
/*平行四边形*/
.sibianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
/*五边形*/
.wubianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
/*六边形*/
.liubianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
 
/*七边形*/
.qibianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
/*八边形*/
.babianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
/*斜角*/
.xiejiao {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
/*凹槽*/
.aocao {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
/*左箭头*/
.zuojiantou {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}
/*右箭头*/
.youjiantou {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
 
/*星星*/
.xingxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/*十字架*/
.shizijia {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
}
/*叉号*/
.Xhao {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
/*对话框*/
.duihuakuang {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
/*变形*/
.bianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    transition: .5s clip-path;
}

.bianxing:hover {
    clip-path: polygon(0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%);
}

js代码：

; (function () {
    //代码块
    $(".outer").addClass("circle");
    var getcss = ["circle", "ellipse", "inset", "sanjiaoxing", "lingxing", "tixing", "sibianxing", "wubianxing", "liubianxing", "qibianxing", "babianxing", "xiejiao", "aocao", "zuojiantou", "youjiantou", "xingxing", "shizijia", "Xhao", "duihuakuang", "bianxing"];
    function gtc(name) {
        for (var i = 0; i < getcss.length; i++) {
            if (getcss[i] != name) {
                $(".outer").removeClass(getcss[i]);
            }
        }
    }
    $("select[name='tx']").change(function () {
        if (this.value == "圆形") {
            gtc("circle");
            $(".outer").addClass("circle");
        } else if (this.value == "椭圆") {
            gtc("ellipse");
            $(".outer").addClass("ellipse");
        } else if (this.value == "矩形") {
            gtc("inset");
            $(".outer").addClass("inset");
        } else if (this.value == "三角形") {
            gtc("sanjiaoxing");
            $(".outer").addClass("sanjiaoxing");
        } else if (this.value == "菱形") {
            gtc("lingxing");
            $(".outer").addClass("lingxing");
        } else if (this.value == "梯形") {
            gtc("tixing");
            $(".outer").addClass("tixing");
        } else if (this.value == "平行四边形") {
            gtc("sibianxing");
            $(".outer").addClass("sibianxing");
        } else if (this.value == "五边形") {
            gtc("wubianxing");
            $(".outer").addClass("wubianxing");
        } else if (this.value == "六边形") {
            gtc("liubianxing");
            $(".outer").addClass("liubianxing");
        } else if (this.value == "七边形") {
            gtc("qibianxing");
            $(".outer").addClass("qibianxing");
        } else if (this.value == "八边形") {
            gtc("babianxing");
            $(".outer").addClass("babianxing");
        } else if (this.value == "斜角") {
            gtc("babianxing");
            $(".outer").addClass("xiejiao");
        } else if (this.value == "槽口") {
            gtc("babianxing");
            $(".outer").addClass("aocao");
        } else if (this.value == "左箭头") {
            gtc("babianxing");
            $(".outer").addClass("zuojiantou");
        } else if (this.value == "右箭头") {
            gtc("babianxing");
            $(".outer").addClass("youjiantou");
        } else if (this.value == "星星") {
            gtc("babianxing");
            $(".outer").addClass("xingxing");
        } else if (this.value == "十字架") {
            gtc("shizijia");
            $(".outer").addClass("shizijia");
        } else if (this.value == "叉号") {
            gtc("Xhao");
            $(".outer").addClass("Xhao");
        } else if (this.value == "对话框") {
            gtc("duihuakuang");
            $(".outer").addClass("duihuakuang");
        } else if (this.value == "鼠标移入时开始变形") {
            gtc("bianxing");
            $(".outer").addClass("bianxing");
        }
    });
})();

效果展示：

在这里插入图片描述

CSS中的路径裁剪样式clip-path的详细使用

悦读