css实现小三角

最新推荐文章于 2024-08-20 23:23:54 发布

麻辣_水煮鱼

最新推荐文章于 2024-08-20 23:23:54 发布

阅读量840

点赞数

分类专栏： css 文章标签： css实现小三角

本文链接：https://blog.csdn.net/weixin_42217154/article/details/109645514

版权

本文介绍如何使用CSS实现小三角形，通过设置不同边框颜色和样式，适应多种浏览器，包括右三角、上三角、下三角和左三角的实现方法。关键在于利用透明边框和特定的边框样式来创建视觉上的三角效果。

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

下面代码想要实现这样的小三角

width: 0px;
height: 0px;
*width: 4px;
*height: 4px;
font-size: 0;
line-height: 0;
overflow: hidden;
border-width: 4px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #236FBD;

这样写可以适应大多浏览器

border-color: transparent transparent transparent #236FBD;;

因为我们要的是右三角，所以我们要保留的是下边框，故把其他三条边设为transparent；

border-style: dashed dashed solid dashed;

把其他三边设为dashed，是因为IE6不支持透明属性transparent，故我们把其它三边的样式设为dashed，dashed在边框宽度很大时，会隐藏。

font-size: 0; line-height: 0; overflow: hidden;

如果不加这三句：在IE浏览器下出现的是梯形而不是三角形

对于上三角，下三角，左三角，只需改变上三角中的两句CSS即可，其他无需改变，改变的代码分别如下所示。