非45º三角形，内容对齐

Question

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

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

我拥有的是：

CSS：

.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;
}

HTML：

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

问题是：我怎样才能以正确的方式做到这一点？每个div应该是该高度三角形右边的X像素，三角形必须在底部以未知高度结束，我应该可以随意改变角度。

Answer 1

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

例如（SCSS，为简洁起见没有供应商前缀） -

HTML：

<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>

CSS：

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%;
    }
  }
}

为了移动东西，它会有一些奇怪的边缘，但它会手动定位元素。

这是codepen!

派对老兄。