开发中实用CSS干货总结（一）CSS实现上、下、左、右三角箭头

作者: 菜菜___ | 来源:发表于2018-12-20 11:43 被阅读1次

开发中实用CSS干货总结（一）CSS实现上、下、左、右三角箭头
css 实现三角形箭头
2019-01-26
css布局
CSS实现空心三角形
CSS布局简介
web前端入门到实战：CSS实现空心三角指示箭头原理
CSS布局
CSS教程汇总
微信聊天气泡实现

在开发中，三角箭头是很常见的icon，很多时候不需要UI提供切图我们可以自己用几行代码写出来，利用div的边框旋转或者使用伪元素的边框旋转，以下通过几种不同的方法绘制。
1.空心线条箭头

效果图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /**上箭头：利用div的边框旋转*/
        .arrow-top{
            margin-top: 32px;
            margin-left: 20px;
            width: 10px;
            height: 10px;
            border-top: 1px solid #757575;
            border-right: 1px solid #757575;
            transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        }
        /*右箭头：利用css伪类:after旋转*/
        .arrow-right:after {
            content: "";
            position: absolute;
            top: 10px;
            left: 50px;
            margin: 20px;
            border-right: 1px solid #757575;
            border-bottom: 1px solid #757575;
            width: 10px; height: 10px;
            transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        /*rotate(-45deg)等同于矩阵转换matrix(0.71, 0.71, 0.71, -0.71, 0, 0)*/
            /*transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);*/
        }
        /*下箭头：利用css伪类:after与矩阵*/
        .arrow-bottom:after {
            content: "";
            position: absolute;
            top: 6px;
            left: 100px;
            margin: 20px;
            border-right: 1px solid #757575;
            border-bottom: 1px solid #757575;
            width: 10px;
            height: 10px;
            transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        }
        /*左箭头：利用css伪类:after与矩阵*/
        .arrow-left:after {
            content: "";
            position: absolute;
            top: 10px;
            left: 150px;
            margin: 20px;
            border-right: 1px solid #757575;
            border-bottom: 1px solid #757575;
            width: 10px;
            height: 10px;
            transform: matrix(-0.71,-0.71, -0.71, 0.71, 0, 0)
        }
    </style>
</head>
<body>
<div class="arrow-top"></div>
<div class="arrow-right"></div>
<div class="arrow-bottom"></div>
<div class="arrow-left"></div>
</body>
</html>

2.实心箭头

效果图

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .arrow {
            position: relative;
            margin:100px auto;
            width:300px;
            height: 150px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .arrow li{
            position: absolute;
            width: 0;
            height: 0;
            border: 10px solid #333;
            list-style: none;
        }
        /*上箭头*/
        .arrow li.top{
            top: 20px;
            left: 10px;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        /*右箭头*/
        .arrow li.right{
            top: 20px;
            left: 60px;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-right-color: transparent;
        }
        /*下箭头*/
        .arrow li.bottom{
            top: 26px;
            left: 110px;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        /*左箭头*/
        .arrow li.left{
            top: 20px;
            left: 160px;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
    </style>
</head>
<body>
<ul class="arrow">
    <li class="top"></li>
    <li class="right"></li>
    <li class="bottom"></li>
    <li class="left"></li>
</ul>
</body>
</html>

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。