您好，我正在尝试制作一个压扁的响应式菱形网格，而我有一个响应式菱形网格，我只是不知道如何将其压扁。我目前的菱形网格是 8*8，我更喜欢用百分比来完成。这是一个代码片段
<html>
<head>
<center>
<div class="diamond">
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</center>
</head>
<body>
<script>
</script>
</body>
<style>
body {
background: black;
color: #000000;
font: 0px georgia, serif;
line-height: 1.4;
font-weight: lighter;
text-rendering: optimizelegibility;
}
.diamond {
padding-top: 7%;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.square {
background-color: white;
display: inline-block;
height: 50px;
overflow: hidden;
width: 50px;
}
</style>
</html>非常感谢任何帮助
最佳答案
#cut-diamond {
border-style: solid;
border-color: transparent transparent blue transparent;
border-width: 0 25px 25px 25px; height: 0;
width: 50px;
box-sizing: content-box;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: blue transparent transparent transparent;
border-width: 70px 50px 0 50px;
}<div id="cut-diamond"></div>关于javascript - 如何制作压扁且 react 灵敏的菱形网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55664449/