使用html+css实现简单的箭头

直接上代码：

<div class="box">
        <p>向上箭头</p>
        <div class="to_top"></div>
        <p>向左箭头</p>
        <div class="to_left"></div>
        <p>向右箭头</p>
        <div class="to_right"></div>
        <p>向下箭头</p>
        <div class="to_bottom"></div>
    </div>

.box {
            width: 400px;
            height: 100px;
            text-align: center;
            margin: 50px auto;
        }

        .box p {
            background: pink;
        }

        /* 向上箭头 */

        .to_top {
            width: 0;
            height: 0;
            border-bottom: 30px solid #f0f;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }

        /* 向左箭头 */

        .to_left {
            width: 0;
            height: 0;
            border-right: 30px solid #ffd900;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
        }

        /* 向右箭头 */

        .to_right {
            width: 0;
            height: 0;
            border-left: 30px solid greenyellow;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
        }

        /* 向下箭头 */

        .to_bottom {
            width: 0;
            height: 0;
            border-top: 30px solid skyblue;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }

最终效果：

当然你可以根据你的需求调整箭头的方向，颜色，大小等参数。

有些事，在我们做之前总觉得很难，但当你真正去做了之后，忽然觉得，这也没有想象的那么难嘛！共勉！