1

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

任何帮助深表感谢

4

1 回答 1

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

于 2019-04-13T10:53:31.400 回答