Question

我正在尝试制作一个菱形网格，但我希望菱形的高度小于宽度。

var x = 8;
var y = 7;
var grid = function(row, collom) {
  var sum = "";
  for (var y = 0; y < (row); y++) {
    sum += '<div class="diamond clearfix">'
    for (var i = 0; i < collom; 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);

.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);
}

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

问题是我只是旋转正方形以使其看起来像钻石，我无法将正方形控制为钻石，因此当我去除一些高度时，它看起来仍然是正方形，因此有什么方法可以挤压钻石或以其他方式创建它吗？

Answer 1

您可以在父元素.diamond上使用CSS变换属性来缩放Y轴。

var x = 8;
var y = 7;
var grid = function(row, collom) {
  var sum = "";
  for (var y = 0; y < row; y++) {
    sum += '<div class="diamond clearfix">';
    for (var i = 0; i < collom; i++) {
      sum += 
        '<div  class="dia">'+
          '<div id = "r' + y + 'c' + i + '" class="grid">'+
            '<div class = "grid-img img-29"></div>'+
          '</div>'+
          '<div id = "r' + (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);

.diamond {
  transform: scaleY(0.8);
  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%;
  margin-bottom: -21px;
}

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);
}

Answer 2

您可以尝试以下页面的“ Diamond Narrow”示例：https://css-tricks.com/the-shapes-of-css/

也许您可以对其进行一些修改以满足您的需求？

<html>
    <style>
        #diamond-flat {
            position: relative;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-right: 70px solid blue;
        }

        #diamond-flat:after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            border: 50px solid transparent;
            border-left: 70px solid blue;
            top: -50px;
            left: 70px
        }
    </style>
<body>
    <div id="diamond-flat">
    </div>
</body>

</html>

如何压制钻石

2 个答案: