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

直接上代码：

        
向上箭头
        

        
向左箭头
        

        
向右箭头
        

        
向下箭头
        

    

.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;
        }

最终效果：

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

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