Javascript 非45º；内容对齐的三角形

我有这个设计，最初以Photoshop格式发送：

它有一个灰色三角形，带有一个非平凡的角度和一些应该与之对齐的div。 目前，我在一个div上使用转换，并手动设置到每个div的距离。这显然是一个糟糕的解决方案，我无法确切知道div的正确宽度

我得到的是：

CSS:

HTML:

。。。
...
...

---

问题是：我如何才能以适当的方式做到这一点？每个div应该是该高度处三角形右侧的X像素，三角形必须在底部以未知高度结束，我应该能够随意更改角度。

如何转换容器，然后“撤消”每个项目上的转换

例如（为简洁起见，SCS和无供应商前缀）-

HTML:

它会有一些奇怪的边距来移动东西，但这比手动定位元素要好

这里有一个

---

你的图像不存在。它在这里打开的很好，必须缓存。我将在另一个地方上传并编辑。谢谢，这对我很有效。没有一个固定的高度，做任何比你现在做的更好的事情都是很难的。如果总高度是固定的，您可以利用这样一个事实，即

left

CSS属性的百分比值是相对于父容器的高度计算的。也许在后台使用简单的嵌入式SVG会更容易？

.triangulo {
    width: 300%;
    min-height: 100%;
    background-color: #e9ebeb;
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    position: absolute;
}

...
<div class="block block-1">...</div>
<div class="block block-2">...</div>
<div class="triangulo show-for-medium-up">

<section class="content">
  <ul>
    <li>
      <div><i class="fa fa-bus"></i></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, autem tenetur?</p
    </li>
    <li>
      <div><i class="fa fa-bus"></i></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, autem tenetur?</p
    </li>
    <li>
      <div><i class="fa fa-bus"></i></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, autem tenetur?</p
    </li>
  </ul>
</section>
  

section.content {
  width: 60%;
  margin: 0 auto;
  padding: 100px 50px 100px;
  background: yellow;
/*   Turn the whole thing */
  transform: rotate(-20deg);
  
}

ul {
  list-style-type: none;
  padding: 0;
  li {
    margin: 100px 0;
    /* Turn em back! */
    transform: rotate(20deg);
    div {
      float: left;
      background: green;
      padding: 25px;
      margin-right: 50px;
      border-radius: 50%;
    }
  }
}