美文网首页
css 画不规则图形不规则按钮

css 画不规则图形不规则按钮

作者: 学无止境吧 | 来源:发表于2021-05-07 08:32 被阅读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全部不支持。

    相关文章

      网友评论

          本文标题:css 画不规则图形不规则按钮

          本文链接:https://www.haomeiwen.com/subject/rnfsdltx.html