Question

我正在为网站设计并希望在其中一个部分中使用三角形网格，就像这里的图像一样：

example image of triangular grid

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

这是我第一次尝试使用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>

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

理想情况下，网格需要宽1200像素，每行包含4个完整三角形，端部有半个或半个三角形，具体取决于行。

任何建议或帮助将不胜感激！感谢。

Answer 1

我相信你想要实现的目标是Slantastic，也就是说你希望三角形的内容不仅仅是93px 矩形 ...我的避风港我自己玩过它（从来没有一个需要它的项目），但它看起来像是工作的正确工具。

使用CSS或jquery的三角网格

1 个答案: