title: float triange picture by the list
body: <p>Here is some code, but it is not perfect, All the list elements will be not static and it need to be placed evenly by height of parent block. SO it should be good looking.
  Now it is placed not through the common height of parent block, I made 50 px bttom margin </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-js lang-js prettyprint-override"><code>$('.triangle-list1, .triangle-list2').wrapAll('&lt;div class="triangle-list-top"&gt;');
          $('.triangle-list3, .triangle-list4').wrapAll('&lt;div class="triangle-list-middle"&gt;');
          $('.triangle-list5, .triangle-list6').wrapAll('&lt;div class="triangle-list-bottom"&gt;');
  
          $('.triangle-list:last').addClass('triangle-list-last');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tr {
   width: 440px;
   height: 325px;
   clip-path: polygon(50% 0, 0 100%, 100% 100%);
   background-position: center !important;
   background-size: cover !important;
   background-repeat: no-repeat !important;
   margin: 100px auto 0px;
  }
  .triangle-list-area {
   position: relative;
   margin-top: -337px;
   height: 450px;
  }
  .triangle-area {
   background-image: url("../img/circles-tr.png");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   background-color: #2b2d33 !important;
  }
  
  .tr-area {
   position: relative;
   background-image: url("../img/figure-tr.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
  }
  .triangle-list {
   font-size: 22px;
   width: 420px;
   position: relative;
  }
  .triangle-list1, .triangle-list3, .triangle-list5{
   text-align: right;
  }
  .triangle-list-top {
   margin-bottom: 20px;
    display: flex;
   justify-content: space-between;
  }
  
  .triangle-list-middle {
   margin-bottom: 20px;
   /*position: relative;*/
   justify-content: space-between;
   display: flex;
  }
  .triangle-list-middle .triangle-list {
   width: 360px;
  }
  .triangle-list-bottom {
   display: flex;
   justify-content: space-between;
  }
  .triangle-list-bottom .triangle-list {
   width: 275px;
  }
  .triangle-list-last {
   bottom: 0px;
   text-align: center;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 100% !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class = "tr-area"&gt;
      &lt;div class = "tr" style="background: url('https://orig00.deviantart.net/3bd9/f/2010/150/a/4/windows_pica_choo_by_yukamarie18.jpg')"&gt;&lt;/div&gt;
          &lt;div class = "triangle-list-area"&gt;
              &lt;div class = 'triangle-list triangle-list1'&gt;Element 1
              &lt;/div&gt;
              &lt;div class = 'triangle-list triangle-list2'&gt;Element 2
              &lt;/div&gt;
              &lt;div class = 'triangle-list triangle-list3'&gt;Element 3
              &lt;/div&gt;
              &lt;div class = 'triangle-list triangle-list4'&gt;Element 4
              &lt;/div&gt;
              &lt;div class = 'triangle-list triangle-list5'&gt;Element 5
              &lt;/div&gt;
              &lt;div class = 'triangle-list triangle-list6'&gt;Element 6
              &lt;/div&gt;
              &lt;div class = 'triangle-list triangle-list6'&gt;Element 7
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Maybe someone know how to create triangle picture and float this picture by the list.
  <a href="https://i.stack.imgur.com/FIYbw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FIYbw.jpg" alt="enter image description here"></a></p>