jquery - 使用 CSS 或 jquery 的三 Angular 形网格

Question

我正在为一个站点设计，并希望在其中一个部分中有一个三 Angular 形网格，有点像这里的图像:

我不确定如何处理这个问题，因为我遇到的所有方法都不能很好地完成工作。

这是我第一次尝试使用 css http://jsfiddle.net/df5wx36e/2/

.container {
  margin-left: 200px;
  width: 1200px;
  display: block;
  clear: both;
}

.up {
    width: 0px;
    height: 0px;
    border-style: inset;
    border-width: 0 200px 200px 200px;
    border-color: transparent transparent #007bff transparent;
    float: left;
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    margin-left: -200px;
}

.up p {
    text-align: center;
    top: 80px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 53px;
    margin: 0px;
}

.down {
    width: 0px;
    height: 0px;
    border-style: inset;
    border-width: 200px 200px 0 200px;
    border-color: #007bff transparent transparent transparent;
    float: left;
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    margin-left: -200px;
}

.down p {
    text-align: center;
    top: -140px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 53px;
    margin: 0px;
}

<div class="container">
  <div class="down">
      <p>some info<p>
  </div>
  <div class="up">
      <p>some info<p>
  </div>
  <div class="down">
      <p>some info<p>
  </div>
  <div class="up">
      <p>some info<p>
  </div>
  <div class="down">
      <p>some info<p>
  </div>     
</div>

<div class="container">
  <div class="up"> 
      <p>some info<p>
  </div>
  <div class="down">
      <p>some info<p>
  </div>
  <div class="up">
      <p>some info<p>
  </div>
  <div class="down">
      <p>some info<p>
  </div>
  <div class="up">
      <p>some info<p>
  </div>
</div>

<div class="container">
  <div class="down">
      <p>some info<p>
  </div>
  <div class="up">
      <p>some info<p>
  </div>
  <div class="down">
      <p>some info<p>
  </div>
  <div class="up">
      <p>some info<p>
  </div>
  <div class="down">
      <p>some info<p>
  </div>
</div>

但内容与三 Angular 形不齐，容易溢出。此外，使用 css 边框创建三 Angular 形时，我无法设置三 Angular 形的背景，或者实际上没有任何尺寸来包含内容。

理想情况下，网格需要 1200 像素宽，并且每行包含 4 个完整的三 Angular 形，并且根据行的不同在末端有半三 Angular 形或半三 Angular 形。

如有任何建议或帮助，我们将不胜感激!谢谢。

Answer 1

我相信使用 Slantastic 可以实现您想要实现的目标，也就是说，如果你想让你的三 Angular 形的内容不仅仅是 93px rectangles...我自己没有玩过它(从来没有一个元素需要它)，但它看起来像适合这项工作的工具。