html - 响应式菱形网格

Question

我有一些正方形(正方形旋转 45° 看起来像菱形)，我想用它们组成一个大的菱形，中间有一颗红色菱形。

我在组织钻石本身时遇到问题，href 似乎失败了。

• 如何在规则网格中放置响应式菱形？

她是my code :

body {
  background: black;
  color: #000000;
  font: 13px georgia, serif;
  line-height: 1.4;
  font-weight: lighter;
  text-rendering: optimizelegibility;
}
#diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: white;
  position: relative;
  top: -50px;
}
#diamond:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: white;
}
#diamond_red {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #AA1C08;
  position: relative;
  top: -50px;
}
#diamond_red:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: #AA1C08;
}

<a class="navigation">
  <center>
    <div id="diamond"></div>
    <div id="diamond"></div>
    <div id="diamond" href="/photos/"></div>
    <div id="diamond_red"></div>
    <div id="diamond" href="/projects/"></div>
    <div id="diamond"></div>
    <div id="diamond"></div>
    <div id="diamond" href="/archive/"></div>
  </center>
</a>

Answer 1

响应式菱形网格:

我认为您没有正确的方法来实现常规响应式菱形网格布局。这样做会简单得多:

• 创建一个 responsive grid of squares(3x3 或您喜欢的任何网格)
• 然后将网格旋转 45 度。

这样您就不必摆弄边框、伪元素(:after、:before)和定位每个菱形。

这是一个 responsive example

它使用百分比宽度和填充底部来保持菱形响应和transform:rotate(45deg);旋转整个网格并使其看起来像菱形网格:

body{background:#000;}
#big_diamond {
  width: 50%;
  margin:15% auto;
  overflow:hidden;
  transform: rotate(45deg);
}
.diamond {
  position: relative;
  float: left;
  width: 31.33%;
  padding-bottom: 31.33%;
  margin: 1%;
  background: #fff;
  transition:background-color .4s;
}
.diamond a {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
#red{background-color: #AA1C08;}
.diamond:hover, #red:hover{background-color:darkorange;}

<div id="big_diamond">
  <div class="diamond"><a href="https://twitter.com/"></a></div>
  <div class="diamond"><a href="https://twitter.com/"></a></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond" id="red"><a href="https://twitter.com/"></a></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
</div>

正如其他人所提到的，我更正了您的 HTML 中的一些错误，例如:Id 必须是唯一的并且 href 不能用于 div。