用css怎么实现三个线条变箭头的动画

div{
width: 20px;
height: 20px;
border: 2px solid #000;
border-top: none;
border-right: none;
transform:rotate(45deg);
}

Dreamweaver cs6在试图模式中可以做热点，其他的编辑器没有一个是支持热点的，要么就自己写，不过自己写比较麻烦，要写八个方位，角度大的话更不好做，如果是圆的话就在上一级加一个a标签吧，然后定位，
<img src="/images/csjpg" alt="" usemap="#Map">
<map name="Map">
<area shape="poly" coords="694,399,623,437,565,524,573,620,586,651,603,687,622,742,651,779,693,810" href="#">
</map>
这是多点模式可以做任何形状

<style>
table{border-collapse:collapse}
table td{border:1px dashed #333;}
</style>
<table>
<tr><td>fwefwfwefew</td><td>fwefwfwefew</td><td>fwefwfwefew</td></tr>
<tr><td>fwefwfwefew</td><td>fwefwfwefew</td><td>fwefwfwefew</td></tr>
<tr><td>fwefwfwefew</td><td>fwefwfwefew</td><td>fwefwfwefew</td></tr>
<tr><td>fwefwfwefew</td><td>fwefwfwefew</td><td>fwefwfwefew</td></tr>
</table>

最近项目中的设计图上有一条曲线设计风格，就想着能不用切图的方法实现吗？（毕竟切图好讨厌的 (≧▽≦)/ ）。就研究了一下实现方式。在此，给大家做一下参考。

大家都知道，CSS3中border已经可以实现一定的弧度。因此，就想着可以利用border的特性画一条曲线。

1首先我们先建一个 div 元素

2给它一些基本样式

最终效果：

从效果上看，这个方法实现的曲线过渡处不够平滑，仍存在较大缺陷。下面就介绍两个更加常用的方法。

在搜索实现方案的过程中，发现一个好用的 工具 ,可以用它来调试出复杂的曲线。根据设计稿的线条，很快就调试出来一个svg的路径参数。

接着，修饰一下该曲线，就能得到我们所需要的效果了。

最终效果如图：
发现Canvas真的是个好东西，可以用前端实现很多特效。当然画个曲线对于它来说，简直小菜一碟。
这里会用到贝塞尔曲线（bezierCurve)的一些知识。该曲线会利用到四个点作为定位点，分别为头和尾点还有两个控制点用来控制整个曲线的形状和曲率。具体可以参考 维基百科 上的相关介绍。

1创建一个 canvas 元素

2利用 bezierCurveTo 这个方法来画该曲线。由于这个方法相关参数难以确定，我同样选择了一个 工具 来获取所需要的具体参数数值。

至此，我们就得到了我们想要的曲线了。

How to Draw Quadratic Curves on an HTML5 Canvas
在线SVG编辑器
MDN SVG Tutorial

---