This is how it looks. enter image description here The text above should be on par with VS from left and right, respectively.

.match_scoreboard_style { position: relative; background-color:#333333; text-align:center; width:100%; } .match_scoreboard_versus { background:#FF8A00; border-radius:25px; color:#FFFFFF; display:inline-block; font-size:24px; line-height:50px; margin:71px auto; position:relative; width:50px; z-index:2; } .match_scoreboard_left { left:0; margin-left:-30%; -webkit-tap-highlight-color:transparent; cursor:pointer; display:inline-block; overflow:hidden; position:relative; transition:all 0.3s ease-out; user-select:none; vertical-align:middle; will-change:opacity, transform; z-index:1; cursor:pointer; display:inline-block; height:192px; position:absolute; top:0; transform:skew(-30deg); width:80%; } .match_scoreboard_right { margin-right:-30%; right:0; -webkit-tap-highlight-color:transparent; cursor:pointer; display:inline-block; overflow:hidden; position:relative; transition:all 0.3s ease-out; user-select:none; vertical-align:middle; will-change:opacity, transform; z-index:1; cursor:pointer; display:inline-block; height:192px; position:absolute; top:0; transform:skew(-30deg); width:80%; } 
 <div class="match_board_wrapper" style="margin-bottom: 0px;"> <div class="match_scoreboard_style"> <div class="match_scoreboard_versus">VS</div> <div class="match_scoreboard_left"></div> <div class="match_scoreboard_right"></div> </div> <div class="col s12 m6" style="position: absolute"> <div class="team_a"> <div class="match_team"> <span class="matcg_team_name"><?echo $match['team 1'];?> </span> <br/> <span id="betsA"> Доделать в X1.46 </span> </div> <div class="team_img" style="background-image:url('img/event/<?=$post['team 1']?>.jpg')";> </div> <div class="team_percent">Тоже доделать в %</div> </div> </div> <div class="col s12 m6"> <div class="team_b"> <div class="team_percent"> Тоже доделать в %</div> <div class="team_img" style="background-image:url('img/event/<?=$post['team 2']?>.jpg')";> </div> <div class="match_team"> <span class="matcg_team_name"><?echo $match['team 2'];?> </span> <br/> <span id="betsB"> Доделать в X4.26 </span> </div> </div> </div> </div>

  • 1. Turn php into html. 2. Reduce to the minimum reproducible example , and it is better to leave it from scratch. 3. Make a snippet from the code (button with <> on the leaflet). Then you can read. - Qwertiy ♦
  • Everything, I Updated! But I did not understand why step 1) to do - Andrew
  • So that you can start right in the browser, experiment and write the answer. And neither 1 nor 3, you did not. Now I'll fix it on the snippet, and you drank the remnants of php so that when you start it will turn out what you have so that it can be further corrected in the answer. - Qwertiy ♦
  • I seem to understand, I have something that doesn’t connect to the style associated with .col, now I’ll change the question :) - Andrei

0