css使用clip-path裁剪出不规则图形并绑定点击事件

周小六

已于 2024-05-16 11:44:04 修改

阅读量616

点赞数 10

CC 4.0 BY-SA版权

文章标签： css 前端 javascript

于 2024-05-16 11:12:54 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40576549/article/details/138917641

点击图片的红色区域触发事件点击图片黑色不触发点击事件，代码演示效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不规则图形点击测试</title>
</head>
<style>
    .box{
        width: 200px;
        height: 470px;
        background-image: url(./1.png);
    }
    .click{
        width: 100%;
        height: 100%;
        clip-path: polygon(84% 0, 100% 0, 100% 58%, 45% 100%, 0 65%);
    }
</style>
<body>
    <div cl