デモページはこちら

CSSのtransformプロパティでsvgを反転します。以下のsvgをオリジナルとし、複製してidを付与してCSSを適用します。svg以外の要素でも同様のCSSで反転可能です。

<p class="title">オリジナル</p>
<svg id="c-btn-arrow01" xmlns="http://www.w3.org/2000/svg" width="131px" height="28px" viewBox="0 0 131 28">
	<path class="c-btn-arrow-parts" fill-rule="evenodd" d="M130.795,25.540 L108.375,0.537 L107.934,2.580 L128.796,26.006 L0.795,26.006 L0.795,28.007 L130.795,28.007 L130.795,25.540 Z"/>
</svg>

Y軸方向に180度回転して反転する、rotateY(180deg)とtransform: scaleX(-1)は同じ表示になります。X軸方向に180度回転して反転する、rotateX(180deg)とtransform: scaleY(-1)は同じ表示になります。平面で180度回転するrotate(180deg)は、X軸方向に180度回転して反転しY軸方向に180度回転して反転するtransform: scale(-1,-1)と同じ表示になります。

.c-btn-arrow-parts {
	fill: #fff;
}
#c-btn-arrow02 {
	transform: rotateY(180deg);
}
#c-btn-arrow03 {
	transform: scaleX(-1);
}
#c-btn-arrow04 {
	transform: rotateX(180deg);
}
#c-btn-arrow05 {
	transform: scaleY(-1);
}
#c-btn-arrow06 {
	transform: rotate(180deg);
}
#c-btn-arrow07 {
	transform: scale(-1,-1);
}