纯css写小三角形，方向自定义颜色自定义，形状自定义。

最新推荐文章于 2022-05-06 14:50:27 发布

前端攻城狮路飞

最新推荐文章于 2022-05-06 14:50:27 发布

阅读量491

点赞数 1

分类专栏： CSS 文章标签： css html5 html css3

本文链接：https://blog.csdn.net/m0_46156566/article/details/111175709

版权

CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

.icon1 {  //向上的小三角，一边颜色自定义，其他三条边设置透明色即可
  width: 0;
  height: 0;
  border-bottom: 15px solid #ff0000;  
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

在这里插入图片描述

.icon2 { //向下的小三角，一边颜色自定义，其他三条边设置透明色即可
  width: 0;
  height: 0;
  border-top: 15px solid #ff0000;
  border-bottom: 10px solid transparent;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

在这里插入图片描述

.icon3 { //向右的小三角，一边颜色自定义，其他三条边设置透明色即可
  width: 0;
  height: 0;
  border-left: 15px solid #ff0000;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

在这里插入图片描述

.icon4 { //向左的小三角，一边颜色自定义，其他三条边设置透明色即可
  width: 0;
  height: 0;
  border-right: 15px solid #ff0000; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
}

在这里插入图片描述

.icon5 {  //异形小三角，一边颜色自定义，其他三条边设置透明色即可
  width: 0;
  height: 0;
  border-bottom: 15px solid #ff0000;  
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.icon6{
  width: 0;
  height: 0;
  border-bottom: 20px solid #ff0000;
  border-top: 6px solid transparent;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

在这里插入图片描述

其实原理很简单，一条边设置需要显示的颜色，其他三条边均设置透明色即可

前端攻城狮路飞

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
纯css写小三角形，方向自定义颜色自定义，形状自定义。

.icon1 { //向上的小三角，一边颜色自定义，其他三条边设置透明色即可 width: 0; height: 0; border-bottom: 15px solid #ff0000; border-top: 10px solid transparent; border-right: 10px solid transparent; border-left: 10px solid transparent;}.icon2 { //向下的小三角，一边颜色自定义，其他三条边
复制链接

扫一扫