Witam

Mam problem poradziłem sobie z lewym i prawym ale nie wiem jak zrobić środek jak na zdjęciu. Proszę was o pomoc.



[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     </head>
  7.     <style>
  8.         body{
  9.             text-align: center;
  10.         }
  11.  
  12.         h3{
  13.             font-size: 60px;
  14.             position: relative;
  15.             display: inline-block;
  16.             padding: 10px 30px 8px 30px;
  17.             height: 80px;
  18.             width: auto;
  19.             background: #000;
  20.             line-height: 80px;
  21.             margin-bottom: 20px;
  22.             font-family: 'Bitter', 'Trebuchet MS', Arial;
  23.             text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
  24.             color: white;
  25.  
  26.         }
  27.  
  28.         h3::before{
  29.             content: '';
  30.             width: 0;
  31.             height: 0;
  32.             border-top: 38px solid transparent;
  33.             border-bottom: 60px solid transparent;
  34.             border-right: 60px solid black;
  35.             position: absolute;
  36.             left: -59px;
  37.             top: 0px;
  38.             background: red;
  39.         }
  40.         h3::after{
  41.             content: '';
  42.             width: 0;
  43.             height: 0;
  44.             border-top: 38px solid transparent;
  45.             border-bottom: 60px solid transparent;
  46.             border-left: 60px solid black;
  47.             position: absolute;
  48.             right: -59px;
  49.             top: 0px;
  50.             background: red;
  51.         }
  52.  
  53.  
  54.  
  55.     </style>
  56.     <body>
  57.  
  58.         <h3>Hello World</h3>   
  59.  
  60.     </body>
  61. </html>
  62.  
[HTML] pobierz, plaintext