CSS实现小箭头效果

CSS   2025-02-18 17:48   15   0  

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title></title>

        <style>

        div{

            width: 300px;

            height: 50px;

            border:1px solid black;

            position: relative;

        }

        div::after{

            content:'';

            width:10px;

            height:10px;

            border-bottom: 1px solid red;

            border-right:1px solid red;

            position: absolute;

            right:0;

            top:10px;

            transform: rotate(45deg);

        }

        </style>

    </head>

    <body>

       <div id="">

           

       </div>

    </body>

</html>

来源:https://cloud.tencent.com/developer/article/2100368?from=15425

博客评论
还没有人评论,赶紧抢个沙发~
发表评论
说明:请文明发言,共建和谐网络,您的个人信息不会被公开显示。