纯css实现各种方向小箭头

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了

梯形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .arrow {
            width: 10px;
            height: 10px;
            border: 10px solid #000;
            border-left-color:red;
        }
    </style>
</head>

<body>
    <div class="arrow"></div>
</body>

</html>

2.把高宽设为0，其他边为透明颜色，三角形出来了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .arrow {
            width: 0;
            height: 0;
            border: 10px solid #000;
            border-left-color:red;
        }
    </style>
</head>

<body>
    <div class="arrow"></div>
</body>

</html>

3.在开发中，可以利用伪类，定位实现，不改变dom结构，简洁优雅。content提供给三角形的位置，这个属性不能少。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .arrow{
            position: relative;
            width: 100px;
            height: 40px;
            background-color: #000000;
        }
        .arrow::after {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color:red;
            content:'';
            position: absolute;
            left: 100px;
            top: 10px;
        }
    </style>
</head>

<body>
    <div class="arrow"></div>
</body>

</html>

4.现在追求平面化设计，还有另一种三角线箭头，更受欢迎。
设置两个伪类，前一个伪类覆盖至另一个了伪类，留出一些线出来就好

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .arrow{
            position: relative;
        }

        .arrow::after,
        .arrow::before {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: red;
            position: absolute;
            content: "";
        }

        .arrow::before {
            top: 0;
            left: 73px; 
            border-left-color: blue;
        }

        .arrow::after {
            top: 0;
            left: 70px; 
            border-left-color: #ffffff;
        }

    </style>
</head>

<body>
    <div class="arrow"></div>
</body>

</html>

纯css实现各种方向小箭头

大煜儿

引用和评论

js判断对象是否为空对象的几种方法

CSS grid 布局如何添加分隔线?

Html&Css测试试题（简单版）

浏览器如何确定最终的CSS属性值？解析计算优先级与规则

你好，我是冴羽，我写了一套《前端大佬成长之路》

原子化的未来？了解一下全面进化的CSS attr函数

万能的渐变！CSS 渐变实现自适应进度条