css---border属性实现小三角型

最新推荐文章于 2023-08-16 19:26:33 发布

原创最新推荐文章于 2023-08-16 19:26:33 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

自学笔记同时被 2 个专栏收录

10 篇文章

订阅专栏

html/css

8 篇文章

订阅专栏

本文介绍如何使用CSS3的border属性创建一个简洁的三角形图标，并通过伪元素及过渡动画实现动态效果。利用transparent属性可以巧妙地隐藏不需要的部分，从而达到视觉上的三角形效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先上波效果图-我的淘宝旁边的小三角

原理：

通过设置border的颜色，显示其中一边，隐藏其他三边，来获取到三角形。

用到了css3属性transparent：被延伸到任何一个有color值的属性上。在这里可理解为设置成透明。具体自行百度。

css样式加动画：

		.triangle{
			position: relative;
		}
		.triangle:after /*after伪类，在triangle类后面添加一个三角形*/
		{
			content: "";
			width: 0;
			height: 0;
			border-width: 20px;
			border-color: #ccc transparent  transparent  transparent;
			border-style: solid;
			/*font-size: 0;
			overflow: hidden;
			line-height: 0;
			position: absolute;*/ /*如果三角形显示成梯形，就添加注释掉的三个样式*/
			top: 45%;
			transition: all .2s; /*添加过渡动画*/
		}
		.triangle:hover::after{ 
			position: absolute;
			top: 5px; /*根据情况定义*/
		}
		@keyframes rotate1{
			from{transform: rotate(0deg);}
			to{transform: rotate(180deg);}
		}