如何压缩菱形？菱形网格高度小于宽度的实现问题求助

我正在制作一个菱形网格，希望菱形的高度小于宽度。目前我通过旋转正方形来模拟菱形，但无法直接控制菱形的高宽比——修改高度后图形仍呈正方形。

当前实现代码如下：

JS代码 #

var x = 8; var y = 7; var grid = function(row, column) { var sum = ""; for (var y = 0; y < (row); y++) { sum += '<div class="diamond clearfix">' for (var i = 0; i < column; i++) { sum += '<div class="dia"><div id="r' + y + 'c' + i + '" class="grid"><div class = "grid-img img-29"></div></div><div id="r' + (Number(y) + 1) + 'c' + i + '" class="grid"><div class="grid-img img-30"></div></div></div>' } sum += '</div>' } document.getElementsByTagName('body')[0].innerHTML = sum; } grid(x, y); 

CSS样式 #

.diamond { margin-left: 1%; margin-bottom: 1%; width: 100%; } .dia { float: left; margin-right: 2.5%; width: 3%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); height: 17.4%; width: 5.50%; } div { display: block; } .grid { position: relative; overflow: hidden; float: left; margin-top: -1%; width: 100%; padding-bottom: 100%; border: 1px solid; /* width: 107%; */ height: -2%; } .grid-img { position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transform: rotate(45deg); transform: rotate(45deg); } 

尝试的HTML结构 #

<div class="dia"> <div class="grid"> <div class="grid-img img-29"></div> </div> <div class="grid"></div> <div class="grid-img img- 30"></div> </div>

目前核心问题：仅通过旋转正方形模拟菱形，无法直接控制菱形高宽比，修改高度后图形仍呈正方形。请问是否有方法压缩菱形，或采用其他方式实现所需菱形网格？

你的核心问题在于用正方形旋转模拟菱形时，正方形的1:1比例限制了菱形的宽高比——旋转操作不会改变元素的实际宽高比例，所以无论怎么调整height属性，最终呈现的还是正方形旋转后的菱形。这里提供两种可行的解决思路：

思路1：通过scaleY压缩旋转后的菱形 #

在现有旋转的基础上，添加垂直方向的缩放，直接压缩菱形的高度。这样可以快速修改现有代码，无需大幅重构：

修改后的关键CSS代码 #

.dia {
  float: left;
  margin-right: 2.5%;
  width: 5.50%;
  /* 先旋转，再垂直缩放（0.6可根据需求调整，值越小菱形越扁） */
  transform: rotate(-45deg) scaleY(0.6);
  /* 修正缩放后的位置偏移 */
  transform-origin: center center;
}

.grid {
  position: relative;
  overflow: hidden;
  float: left;
  margin-top: -1%;
  width: 100%;
  /* 保持正方形的基础比例，后续通过scaleY压缩 */
  padding-bottom: 100%;
  border: 1px solid;
}

.grid-img {
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 注意：这里的旋转要抵消父元素的旋转+缩放，所以需要反向缩放后再旋转 */
  transform: scaleY(1.666) rotate(45deg); /* 1/0.6≈1.666，抵消scaleY的影响 */
}

原理：通过scaleY(0.6)将旋转后的正方形垂直方向压缩，同时为了保证内部的grid-img不被拉伸，需要用反向的scaleY(1.666)还原图片比例，再旋转45度抵消父元素的旋转。

思路2：使用clip-path直接定义菱形（更灵活） #

放弃旋转正方形的思路，直接用CSS的clip-path属性裁剪出任意宽高比的菱形，这种方法更直观，也更容易控制比例：

示例实现代码 #

调整后的JS代码（无需大改，保持网格结构）

var x = 8; var y = 7; 
var grid = function(row, column) { 
  var sum = ""; 
  for (var y = 0; y < row; y++) { 
    sum += '<div class="diamond clearfix">';
    for (var i = 0; i < column; i++) { 
      sum += '<div class="dia">';
      sum += '<div id="r' + y + 'c' + i + '" class="grid"><div class="grid-img img-29"></div></div>';
      sum += '<div id="r' + (y + 1) + 'c' + i + '" class="grid"><div class="grid-img img-30"></div></div>';
      sum += '</div>';
    } 
    sum += '</div>';
  } 
  document.body.innerHTML = sum; 
}; 
grid(x, y); 

新的CSS样式

.diamond {
  margin-left: 1%;
  margin-bottom: 1%;
  width: 100%;
}

.dia {
  float: left;
  margin-right: 4%; /* 根据菱形宽度调整间距 */
  width: 6%;
  height: 80px; /* 直接控制菱形的高度 */
  margin-top: 20px; /* 调整行间距 */
}

.grid {
  position: relative;
  width: 100%;
  height: 100%;
  /* 定义菱形裁剪路径：四个顶点分别对应上、右、下、左 */
  /* polygon的四个值可以根据宽高比调整，这里是宽>高的菱形 */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border: 1px solid #000;
  overflow: hidden;
}

.grid-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

原理：clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)直接定义了菱形的四个顶点，通过调整.dia的width和height，可以轻松控制菱形的宽高比——比如设置width: 6%; height: 40px就能得到明显扁于宽度的菱形。

两种方案对比 #

• 方案1适合快速修改现有代码，成本低，但需要处理缩放后的元素偏移和内部图片的比例还原；
• 方案2更直观，易于维护，能直接控制菱形的宽高比，是更推荐的现代CSS实现方式。

内容的提问来源于stack exchange，提问作者Leja Vaitkeviciute