CSS三角形与动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_9473/article/details/82619439

本文介绍如何使用CSS创建三角形，并实现一个简单的向下箭头图标，在鼠标悬停时变为向上箭头的动画效果。

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


html

<s class="one"><i></i></s>

css
.one{
width: 0px;height: 0px;display: block;border: 10px solid;border-color: transparent transparent #666 transparent;position: absolute;left: 180px;top: 30px;
	}
.one i{width: 0px;
height: 0px;
display: block;
border: 10px solid;
line-height: 0px;
border-color: transparent transparent #fff transparent;
line-height: 0px;
position: absolute;
left: -10px;
top: -9px;}

#说明 1 s i宽度设为0使一边的border从梯形变为3角形，设置border-color 使有些地方看起来无边,把我们不需要的屏蔽掉 i设置position absolute 是为了能让它定位来在s上面以此用他的白色来覆盖s
2 可以不要i以此来获得三角形
下面说明i的left top的设置
当s i未定位时位置关系如下

[img]http://dl2.iteye.com/upload/attachment/0108/7979/f70d641f-c5ae-3cfd-85ad-86a559f9d288.png[/img]
注意正方形的宽度即可设s中点坐标为（0,0）i中点坐标为（10,10）0-10 0-9
设置left top值
最终效果

[img]http://dl2.iteye.com/upload/attachment/0108/7983/3a97f822-ad25-3d9e-a91a-e5c74c6abb8d.png[/img]
再制作一个只有三角形符号的动画，当hover时向下的箭头变成向上的箭头。



<a href='#'><i></i></a>

css
i{position: absolute;top: 20px;border-color: #666 transparent transparent;transition:all .3s ease-in-out 0s;display: inline-block;height: 0px;width: 0px;border: 4px solid;}
a:hover i{position:relative;border-color: transparent transparent #666;top: 16px;/*要让前后两个小三角在同一个位置，故top变为20-16*/}

鼠标滑过时会出现小三角向上移动消失并且出现上三角的动画。