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

问题描述

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

我自己组织钻石时遇到问题，href 似乎失败了.

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

她是我的代码:

body {背景:黑色；颜色:#000000；字体:13px 格鲁吉亚，衬线；行高:1.4；字体粗细:更轻；文本渲染:优化易读性；}#钻石 {宽度:0；高度:0；边框:50px 实心透明；边框底色:白色；位置:相对；顶部:-50px；}#钻石:在{之后内容: '';位置:绝对；左:-50px；顶部:50px；宽度:0；高度:0；边框:50px 实心透明；边框顶部颜色:白色；}#diamond_red {宽度:0；高度:0；边框:50px 实心透明；边框底部颜色:#AA1C08；位置:相对；顶部:-50px；}#diamond_red:在{之后内容: '';位置:绝对；左:-50px；顶部:50px；宽度:0；高度:0；边框:50px 实心透明；边框顶部颜色:#AA1C08；}

<中心><div id="钻石"></div><div id="钻石"></div><div id="diamond" href="/photos/"></div><div id="diamond_red"></div><div id="diamond" href="/projects/"></div><div id="钻石"></div><div id="钻石"></div><div id="diamond" href="/archive/"></div></中心>

解决方案

响应式菱形网格:

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

• 创建一个响应式正方形网格(3x3 或您喜欢的任何网格)
• 然后将网格旋转 45 度.

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

这是一个响应示例

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

body{background:#000;}#big_diamond {宽度:50%；保证金:15% 自动；溢出:隐藏；变换:旋转(45度)；}.钻石 {位置:相对；向左飘浮;宽度:31.33%；填充底部:31.33%；保证金:1%；背景:#fff;过渡:背景颜色 .4s；}.diamond a {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；}#红色{背景颜色:#AA1C08;}.diamond:hover, #red:hover{background-color:darkorange;}

<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>

正如其他人所提到的，我更正了您的 HTML 中的一些错误:ID 必须是唯一的，并且不能在 div 上使用 href.

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.

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?

Her is 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>

解决方案

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:

• 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

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>

As other people have mentioned, there are some errors in your HTML that I corrected like: Ids need to be unique and href can't be used on divs.

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