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

拼搏现实的明天。 2022-06-05 01:59 1239阅读 0赞

直接上代码：

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

最终效果：

![Center][]

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

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

[Center]: /images/20220605/c19d701fce5d4dbebf90c0dce1c2f3a2.png