看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");}});})();
效果展示：
