clip-path

作者: lu2294 | 来源:发表于2019-11-06 10:36 被阅读0次

    ```

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <style>

            body{

                font: normal 14px "Microsoft YaHei",Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

            }

            .content{

                width: 100px;

                height: 100px;

                background-color: red;

                border-radius: 5px;

                clip-path: polygon(0% 0%,100% 0%,100% 75%,75% 75%,75% 100%,50% 75%,0% 75%);

                /* clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); */

            }

        </style>

    </head>

    <body>

      <div class="content">

            <div class="banner">

            </div>

      </div>

    </body>

    </html>

    ```

    相关文章

      网友评论

          本文标题:clip-path

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