Html 内有文字的平行图

我试着做一个平行四边形，里面和底部都有信息

下面是我想做的简要概述：
第1组
Vs.
第二组

我尝试过使用这个，但是在定位和文本位于实际平行四边形下时遇到了问题

width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);

所以我的问题是，我将如何实现这一点？我希望文本位于平行四边形的顶部，并以3行的形式排列

“制作一个容器div，一个平行四边形的背景div，以及一个包含文本内容的跨度。然后使用绝对定位将元素堆叠到所需的输出中。”–magreenberg

如果你想重拍这部电影，这就是全部内容：
HTML:

    <div class="match">
                <div class=parallelogram>
                    <span id="team1">#TEAM1</span><br>
                    <span id="vs">vs.</span><br>
                    <span id="team2">#TEAM2</span><br>
                </div>
            </div>

---

这是从我的.css文件中复制和粘贴的，你可以用它做任何事情。

为了最大的通用性，请将html5画布标记与javascript一起使用

---

将在一分钟后发布链接示例。

制作一个容器

div

，为平行四边形制作一个背景

div

，以及一个带有文本内容的

span

。然后使用绝对定位将元素堆叠到所需的输出中。请提供一个JSFIDLE或CodePen作为起点。我们也不知道这应该是什么样子。谢谢你，马格里伯格！解决了我的问题！：）我个人还不知道javascript。以后再学吧。不过，谢谢你的回复和建议。

    section article .matchbg {
width: 150px;
height: 150px;
margin-left: 30px;
margin-right: 30px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background-color: #ff2828;
position: absolute;
}

section article .matchbg span {
font-family: 'Roboto Condensed:300', sans-serif;
}
#team1 {
font-family: 'Roboto Condensed:700italic', sans-serif;
font-size: 24;
margin-left:25;
}

#team2 {
font-family: 'Roboto Condensed:700italic', sans-serif;
font-size: 24;
margin-left:25;
}

#vs {
font-family: 'Roboto Condensed:700italic', sans-serif;
font-size: 20;
margin-left:60;
}