如何压扁钻石
[英]how to squish a diamond
问题描述
I am trying to make a diamond grid but I want the diamonds height to be smaller than the width.
我正在尝试制作菱形网格，但我希望菱形的高度小于宽度。
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);
.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>
The problem is that I am just rotating the square to look like a diamond and I cant control the square as a diamond so when I remove some height it appears to be still a square so is there any way to squish the diamond or create it differently?问题是我只是旋转正方形使其看起来像钻石，我无法将正方形控制为钻石，所以当我移除一些高度时它看起来仍然是正方形所以有什么方法可以压扁钻石或以不同的方式创建它？
2 个解决方案
解决方案1
2 已采纳 2019-04-09 11:44:07
You can use the CSS transform property on the parent element .diamond to scale the Y axis.您可以在父元素.diamond上使用 CSS transform 属性来缩放 Y 轴。
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' + (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); }
解决方案2
-1 2019-04-09 11:42:30
You can try the "Diamond Narrow" example of the following page: https://css-tricks.com/the-shapes-of-css/您可以尝试以下页面的“Diamond Narrow”示例： https ://css-tricks.com/the-shapes-of-css/
Maybe you can modify it slightly to meet your needs?也许你可以稍微修改一下以满足你的需要？
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.