CSS绘制两个相连的多边形

Question

有这样一段HTML：

<span>Repo</span><span>Branch</span>

想要用css绘制出下图的效果：

应该如何写这段CSS？