响应菱形网格 [英] Responsive diamond grid

问题描述

我有一系列正方形（正方形变成45°看起来像钻石），我想用它们组成一个大的钻石形状，中间有一颗红色的钻石。

I have a selection of squares (squares turned 45° to look like diamonds) which I want to use to make up a big diamond shape with a central red diamond.

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

I am having issues organising the diamonds themselves and the href seems to fail.

• 如何将响应式钻石置于常规网格中？

• How do I position the responsive diamonds in a regular grid?

她是我的代码：

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>

推荐答案

响应式网格的diamons：

我不认为你有正确的aproach实现 / strong>。这将更容易：

The responsive grid of diamons:

I don't think you have the right aproach to achieve a regular responsive diamond grid layout. It would be much simpler to:

• 创建响应网格（3x3或任何您感觉的网格）


• 然后将网格旋转45度。

• create a responsive grid of squares (3x3 or whatever grid you feel like)
• then rotate the grid 45 degrees.

这样你就不必再乱窜边框，伪元素（：

That way you won't have to fiddle with borders, pseudo elements (:after, :before) and positioning each diamond.

这里是一个

Here is a responsive example

它使用百分比宽度和padding-bottom来保持菱形响应和 transform：rotate（45deg）; 旋转整个网格，使其看起来像菱形网格：

It uses percentage width and padding-bottom to keep the diamonds responsive and transform:rotate(45deg); to rotate te whole grid and make it look like a diamond grid:

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。

这篇关于响应菱形网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！