原理:
通过设置border的颜色,显示其中一边,隐藏其他三边,来获取到三角形。
用到了CSS3属性transparent:被延伸到任何一个有color值的属性上。在这里可理解为设置成透明
css样式加动画:
<span style="white-space:pre"> </span>
.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);}
}