如何制作一个压扁和反应灵敏的菱形网格

Question

hi i am trying to make a squished responsive diamond grid and i have a responsive diamond grid i just don't know how to make it squished. 嗨，我正在尝试制作一个压制的响应式菱形网格，而我有一个响应式的菱形网格，我只是不知道如何进行压制。 my current diamond grid is 8*8 and i prefer if it was done with percent. 我当前的菱形网格是8 * 8，我更喜欢是否用百分比完成。 here is a code snippet 这是一个代码片段

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

any help is much appreciated 任何帮助深表感谢

Answer 1

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

如何制作一个压扁和反应灵敏的菱形网格

问题描述

1 个解决方案

解决方案1
-1 2019-04-13 10:53:31

如何制作一个压扁和反应灵敏的菱形网格

问题描述

1 个解决方案

解决方案1 -1 2019-04-13 10:53:31

解决方案1
-1 2019-04-13 10:53:31