css画个三角形，可旋转

来源：互联网发布：淘宝店铺小图标素材编辑：程序博客网时间：2024/06/06 13:00

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>box-sizing</title><style>  i{font-weight:500;    font-style:normal;   }  .hitme {          display:block;          line-height:22px;          height:22px;          overflow:visible;          padding:0px 15px;          font-size:14px;          width:40px;          position:relative;                  }      .hitme i{          border-color: transparent transparent #000  transparent;        border-style: solid;        border-width: 0px 4px 4px 4px;        _border-style:solid dotted;        position:absolute;        top:10px;        right:10px;                     width:0px;        height:0px;        zoom:1;        -webkit-transition: -webkit-transform 0.2s ease-in;        -moz-transition:    -moz-transform 0.2s ease-in;        -o-transition:      -o-transform 0.2s ease-in;        transition:         transform 0.2s ease-in;      }      .addMe i,.hitme:hover i{                    -moz-transform:           rotate(180deg);              -webkit-transform:        rotate(180deg);               -o-transform:             rotate(180deg);               transform:                rotate(180deg);               filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);      }</style><script type="text/javascript"  src="../js/jquery-1.11.2.min.js"></script><script type="text/javascript">   $(function(){       $('a.hitme').hover(function(){                               $(this).addClass('addMe');    },function(){        $(this).removeClass('addMe');    })   })</script></head><body>    <div style="width:700px;margin:0 auto;height:700px;border:1px solid #e5e5e5">  <a class="hitme">点击<i></i></a></div></body></html>

下面说一下，关键点：

设置width：0，height：0这是必须的，
然后设置border-width这个需要技巧了，top不需要，然后其他等宽
设置border颜色，除去下面不透明其他都透明
然后利用css3的动画效果，使得可以旋转
至于为什么会有这样的效果，自己试一试就知道了

0 0