箭头用css3怎么写

时间：2021-01-04 11:23

用css3写箭头的方法：首先创建一个前端示例文件；然后利用CSS3中的transform属性实现一个没有背景填充小正方形；最后通过设置它的边框和翻转即可实现箭头效果。

本教程操作环境：Dell G3电脑、Windows7系统、HTML5&&CSS3版本。

推荐：《css视频教程》

箭头用css3怎么写？

可以利用CSS3中的transform属性，先实现一个没有背景填充小正方形，设置它的边框、翻转就可以实现箭头了。

下面通过示例来看看：

<style>
        .left{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(-135deg);
            
        }
        .right{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(45deg);
        }
        .top{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(-45deg);
        }
        .bottom{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(135deg);
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <hr>
    <div class="right"></div>
    <hr>
    <div class="top"></div>
    <hr>
    <div class="bottom"></div>
</body>

效果图：