css 画不规则图形不规则按钮
2021-05-07 本文已影响0人
学无止境吧
css里面有个属性叫clip-path，可以把长方形的css元素切割为不规则图形，点击响应的区域也只有切割后的图形才能响应。因此可以利用这个属性生成一下简单的图形。有个工具可以帮助我们生成不规则图形，地址:
https://www.css88.com/tool/css-clip-path/
借助这个工具，我们就能生成各种简单图形了，比如:
箭头:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width:20vw;height:20vw;background-color: red;" class="shape">
</div>
<style>
.shape {
-webkit-clip-path: polygon(85% 0, 50% 49%, 85% 100%, 70% 100%, 35% 50%, 70% 0);
clip-path: polygon(85% 0, 50% 49%, 85% 100%, 70% 100%, 35% 50%, 70% 0);
}
</style>
</body>
</html>
向右的箭头:
<style>
.shape {
-webkit-clip-path: polygon(30% 0, 65% 50%, 30% 100%, 15% 100%, 50% 50%, 15% 0);
clip-path: polygon(30% 0, 65% 50%, 30% 100%, 15% 100%, 50% 50%, 15% 0);
}
</style>
关闭的叉:
<style>
.shape {
-webkit-clip-path: polygon(5% 0, 0 5%, 45% 50%, 0 95%, 5% 100%, 50% 55%, 95% 100%, 100% 95%, 55% 50%, 100% 5%, 95% 0, 51% 45%);
clip-path: polygon(5% 0, 0 5%, 45% 50%, 0 95%, 5% 100%, 50% 55%, 95% 100%, 100% 95%, 55% 50%, 100% 5%, 95% 0, 50% 45%);
}
</style>
三角形箭头:
<style>
.shape {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>
注意:iOS浏览器iOS7以上支持，android浏览器4.4以上支持。opera浏览器全部不支持。iE全部不支持。
