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的详细使用相关推荐

CSS中的路径裁剪样式clip-path
前面的话 CSS借鉴了SVG裁剪的概念,设置了clip-path样式,本文将详细介绍路径裁剪clip-path 概述 clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区 ...
html h1转换为行内,css中转换为行内样式的解决方案(css-inline)
聊聊场景发送邮件在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信.今日头条等自媒体在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变解决方案这两种方案功能和 Ap ...
webpack插件实现自动抽取css中的主题色样式，并动态切换主题色（element-ui）
项目项目中用了element-ui,有切换主题色的需要.但官方的方式,有几个问题: 1.需要下载整个element-ui的样式css,并替换其中的css样式颜色.文件较大,下载慢且影响性能. 2.只能 ...
如何使用jquery修改css中带有!important的样式属性
<div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...
CSS中border的所有样式属性
CSS中border的所有样式属性 1.solid:实线使用方法:border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px ...
CSS中内容的剪切属性clip
1. 在CSS中,可以使用剪切属性对元素内容的可视化区域进行控制,剪切区域所使用的属性时clip属性, 用来裁剪元素的可视化区域,内容的剪切属性可以使用2种属性值,一种为auto值,另一种为区域值,语 ...
CSS中的四种样式及选择器
CSS语法选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素. 属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性属性值:属性值包括法定属 ...
CSS中的三种样式来源：创作人员、读者和用户代理
查看原文:https://www.cnblogs.com/JJJJJKKKKK/articles/4542545.html CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样 ...
html文字段落设置,css中怎么设置段落样式？
段落是文章的基本单位,也是网页的基本单位.段落的放置与效果的显示会影响到页面的布局和风格.CSS样式提供了多种属性,来实现对页面中段落文本的控制. css设置段落样式的方法: 对齐方式通过 text- ...

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

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

最新文章

热门文章