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

来源：互联网发布：python绝技代码下载编辑：程序博客网时间：2024/05/17 06:05

原理：

通过设置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);}          }

0 0