需求

H5活动页需要用的图标很少，暂时没有使用iconfont的必要性，而通过图片的话额外增加UI的工作量以及增加请求数，前端也有很多实现简单图标的方法，所以就尝试自己去解决，写一个“返回顶部”的小图标。

最终效果

SVG

先在纸上画一个坐标系，然后计算出大致每个点所在的坐标就可以通过path做一条闭合路径。

<svg>

	<path d="M50 25 L14 65 L50 45 L86 65 Z" style="fill: #fff"></path>

</svg>

在实际应用中发现，虽然通过svg实现效果非常简单，只有一句代码，但是移动端采用的是rem的布局，图案位置定位总是对不准或者有偏差，在web或android上表现都可以，但是在ios与pc上需要重新调整位置，导致问题很棘手，主要是自己对svg的其他属性还不熟悉，不太会用。

CSS3

在svg方式之外也想了css3的实现方式并进行了实践，通过css3虽然在代码量上有所增加，但自己整体比较熟悉，可以控制其定位于位置，而且可以更方便的调整样式（svg需要不断结合坐标系思考）。

思路：先画直角三角形，然后进行倾斜，同理，画另外一个方向相反的三角形。

@width: 200px;

@height: 100px;

@fillColor: red;

@skew: 30deg;

@top: 70px;

.icon {

	&::before, &::after {

		content: "";

		position: absolute;

		top: @top;

		left: 0;

		width: 0;

		height: 0;

	}

	&::before {

		border-left: @width solid transparent;

		border-bottom: @height solid @fillColor;

		transform: skewY(-@skew);

	}

	&::after {

		left: @width;

		border-right: @width solid transparent;

		border-bottom: @height solid @fillColor;

		transform: skewY(@skew);

	}

}

See the Pen vmzzgE by 杨友存 (@Gavin-YYC) on CodePen.

最后确定使用熟悉的CSS3方式代替svg的方式。