响应式钻石网格

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

diamons的响应网格：

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

• 创建一个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中有一些错误我更正了：Ids需要是唯一的，并且href不能用于div。

Answer 2

你需要在第一个问题上更具体/清晰。

首先，您多次使用 ID '钻石'。 ID应该是唯一的并用于一个元素。您应该为此使用类，而不是ID。

其次，您不能在div标签中使用href。您可以将div包装在a标签中，如下所示：

<a href="http://twitter.com/"><div class="diamond"></div></a>

或者，甚至更好以便可以点击整个形状，您可以将a放在div内，并使a成为100％宽度和高度的块级元素像这样：

<div class="diamond"><a href="http://google.com"></a></div>

div a{
    width: 100%;
    height: 100%;
    display: block;
}

JSFiddle示例：http://jsfiddle.net/kQj24/1/

Answer 3

对于不支持变换的浏览器，此html具有后备功能，因为钻石成为正方形。此外，<div>元素可以使用此方法包装在<a>标记中，而不会更改a的任何现有css规则。如果不支持transform，则square类中的文本也不会旋转。

<center>
    <div class="diamond">
        <div class="row">
            <a href="#"><div class="square"><p>Text</p></div></a>
            <a href="#"><div class="square"></div></a>
            <a href="#"><div class="square"><p>Text</p></div></a>
        </div>
        <div class="row">        
            <a href="#"><div class="square"><p>Text</p></div></a>
            <a href="#"><div class="square red"><p>Text</p></div></a>
            <a href="#"><div class="square"><p>Text</p></div></a>
        </div>
        <div class="row">        
            <a href="#"><div class="square"><p>More</p></div></a>
            <a href="#"><div class="square"></div></a>
            <a href="#"><div class="square"><p>Text</p></div></a>
        </div>
    </div>
</center>

CSS，使用您现有的正文规则：

.diamond {
    padding-top: 50px;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

.square {
    background-color: white;
    display: inline-block;
    height: 50px;
    overflow: hidden;
    width: 50px;
}

.square:hover {
    background-color: green;
}

.square p {
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

.red {
    background-color: red;
}

http://jsfiddle.net/5Q8qE/8/