内容对齐的非 45º 三角形

Question

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

它有一个带 non-trivial 角的灰色三角形和一些应该与它对齐的 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!

派对伙计。

内容对齐的非 45º 三角形

Non-45º triangle with aligned content

html

javascript

css

这是一个codepen!