CSS绘制小三角形效果实现&扩展

最新推荐文章于 2024-08-21 11:59:03 发布

PTKGEM

最新推荐文章于 2024-08-21 11:59:03 发布

阅读量4.5k

点赞数 7

分类专栏： Css / Html 工具 / 软件相关文章标签： css ui

本文链接：https://blog.csdn.net/dong_pt/article/details/50901650

版权

本文详述了利用CSS实现小三角形的各种方法，包括border属性法、CSS3旋转正方形法、图片法、HTML字符法、HTML5 Canvas法和SVG法，并探讨了它们的优缺点和适用场景。

摘要由CSDN通过智能技术生成

CSS小三角形在线生成工具
这里写图片描述

你可以在网页中很多地方看到三角形（小三角）：tooltips提示框、下拉菜单、返回顶部、甚至在loading载入动画里。不管你喜欢还是不喜欢，这些小元素对各UI元素之间的联系是很重要的。本文主要介绍利用CSS的实现方法：

首先我们来看一下border这个属性，当我们把一个div的border-color设为不同值的时候，可以看到四边都成了一个梯形。

#test{
width:50px; 
height:50px; 
border-width:50px; 
border-style:solid; 
border-color:#2DC9FE #FF7526 #0FDD06 #FFEC32;
}

例子-01

如果我们继续把这个div的width和height都设为0，可以看到四边都成了一个三角形。

#test{
width:0; 
height:0; 
border-width:50px; 
border-style:

关注

专栏目录