通过SVG与CSS3实现向上图标

需求

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的方式。