纯CSS实现各种三角形

最新推荐文章于 2021-11-29 16:19:04 发布

原创最新推荐文章于 2021-11-29 16:19:04 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

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