CSS实现小箭头效果

切图仔

发布于 2022-09-08 16:22:03

1.7K0

发布于 2022-09-08 16:22:03

项目中要使用小箭头时我们一般引入字体图标，但其实css3也可以画出一个小箭头主要利用了tranform的rotate

我们的小箭头的原型是一个正方形，我们只保留正方形底部和右边区域在使其旋转45度即可

<!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>

效果如下