Параллеллограмма с текстом внутри

Question

Я пытаюсь сделать параллелограмм, содержащий информацию внутри и внизу.

Вот краткий обзор того, что я пытаюсь сделать:
TEAM1
Vs.
TEAM2

Я пробовал использовать это, но имел проблемы с позиционированием и текстом, находящимся под фактическим параллелограммом.

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

Так что мой вопрос: как мне это реализовать? Я хочу, чтобы текст был на вершине параллелограмма и выложен в 3 строках.

Answer 1

«сделать контейнер 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:

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; 
} 

Это просто скопировать из моего файла .css, вы может делать все с этим.

Answer 2

Для наибольшей общности используйте тег html5 canvas с javascript.

Будет ли ссылка ссылки в минуту.