title: geometric shape in css, filled up with content
body: <p><a href="https://i.stack.imgur.com/mebTv.png" rel="nofollow noreferrer">example picture : is it even possible?</a>
  Hello everybody. I really stuck with the problem:
  Have: 4 links with icons. (like menu)
  Need: place them all into the shape. Which one would be adaptive while scaling and doesn't let the content go out of shape.
  Tried (btw 2 weeks already trying): css generators, rotations, compiling rectangle and triangle, pseudoelement ":after". But the result is nothing.
   p.s. I'm the only begginer, and may be something obvious for experts like you I'm just missing, that's why I'm asking. </p>
  
  <p>my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .item{
      text-align: center;
      margin-left: 12%;
      transform:  scaleY(-1);
  }
  .linkiconsize img{
      height: 50px;
  }
  
  
  /*ICON BG SHAPES */
  .trapezoid {
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      width: 50%;
      top: 12%;
      border-top: 0 solid;
      border-right: 35px solid rgba(0,0,0,0);
      border-bottom: 61px solid black; /* white required */
      border-left: 0 solid rgba(0,0,0,0);
      color: rgba(0,0,0,0);
      -o-text-overflow: clip;
      text-overflow: clip;
      -webkit-transform:  scaleY(-1);
      transform:  scaleY(-1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
              &lt;!-- bootstrap --&gt;
          
              &lt;div class="wrapperpos trapezoid"&gt;
               &lt;div class="container-fluid"&gt;
                  &lt;div class="row no-gutters align-items-center item"&gt;
                      &lt;div class="col-6 col-md-2"&gt;
          
                          &lt;a href="#"&gt;
          
                              &lt;div class="linkiconsize"&gt;
                                  &lt;img src="img/wdep.png"/&gt;
                              &lt;/div&gt;
          
                              &lt;span class=""&gt;
                          Web development
                      &lt;/span&gt;
          
                          &lt;/a&gt;
          
                      &lt;/div&gt;&lt;!-- web dev --&gt;
          
                      &lt;div class="col-6 col-md-2"&gt;
          
                          &lt;a href="#"&gt;
          
                              &lt;div class="linkiconsize"&gt;
                                  &lt;img src="img/app.png"/&gt;
                              &lt;/div&gt;
          
                              &lt;span&gt;
                          Mobile applications
                      &lt;/span&gt;
          
                          &lt;/a&gt;
          
                      &lt;/div&gt;&lt;!--mobile applications--&gt;
          
                      &lt;div class="col-6 col-md-2"&gt;
          
                          &lt;a href="#"&gt;
          
                              &lt;div class="linkiconsize"&gt;
                                  &lt;img src="img/seng.png"/&gt;
                              &lt;/div&gt;
          
                              &lt;span&gt;
                          Service engineering
                      &lt;/span&gt;
                          &lt;/a&gt;
          
                      &lt;/div&gt;&lt;!--service--&gt;
          
                      &lt;div class="col-6 col-md-2"&gt;
          
                          &lt;a href="#"&gt;
          
                              &lt;div class="linkiconsize"&gt;
                                  &lt;img src="img/bsn.png"/&gt;
                              &lt;/div&gt;
          
                              &lt;span&gt;Business analysis and audit&lt;/span&gt;
                          &lt;/a&gt;
          
                      &lt;/div&gt;&lt;!--business--&gt;
          
                  &lt;/div&gt;&lt;!-- row with no gutters + link's positions--&gt;
                      &lt;/div&gt;&lt;!--container --&gt;
                      &lt;/div&gt; &lt;!--wrapper--&gt;
          </code></pre>
  </div>
  </div>
  </p>