Question

嗨，我正在尝试制作一个压制的响应式菱形网格，而我有一个响应式的菱形网格，我只是不知道如何进行压制。我当前的菱形网格是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>

非常感谢任何帮助

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 个答案: