纯CSS实现各种三角形

最新推荐文章于 2023-04-11 10:00:22 发布

liuyan1106_

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS/CSS3 文章标签： css

本文链接：https://blog.youkuaiyun.com/liuyan1106_/article/details/110390913

CSS/CSS3 专栏收录该内容

14 篇文章

订阅专栏

在这里插入图片描述
一、上箭头

.arrows-up {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid #45FFF8;
}

二、下箭头
在这里插入图片描述

.arrows-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid #45FFF8;
}

三、左箭头
在这里插入图片描述

.arrows-left {
   width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 30px solid #45FFF8;
    border-bottom: 20px solid transparent;
}

四、右箭头
在这里插入图片描述

.arrows-right {
   width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 30px solid #45FFF8;
    border-bottom: 20px solid transparent;
}

五、左上箭头
在这里插入图片描述

.arrows-top-left {
    width: 0;
    height: 0;
    border-top: 30px solid #45FFF8;
    border-right: 30px solid transparent;
}

六、右上箭头
在这里插入图片描述

.arrows-top-right {
    width: 0;
    height: 0;
    border-top: 30px solid #45FFF8;
    border-left: 30px solid transparent;
}

七、左下箭头
在这里插入图片描述

.arrows-bottom-left {
    width: 0;
    height: 0;
    border-bottom: 30px solid #45FFF8;
    border-right: 30px solid transparent;
}

八、右下箭头
在这里插入图片描述

.arrows-bottom-right {
    width: 0;
    height: 0;
    border-bottom: 30px solid #45FFF8;
    border-left: 30px solid transparent;
}