css画个三角形,可旋转

<!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>

下面说一下,关键点:

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

你可能感兴趣的:(css)