Question

我想在一个正方形中插入4个菱形（菱形）和8个三角形。通过搜索堆栈溢出，我已经设计了90％的溢出。但现在，我遇到了一个问题，如PLUNKER DEMO所示。 我想加入Plunker中显示的2个形状 。任何人都可以通过编辑相同的PLUNKER DEMO 来帮助我，因为我需要控制所有12个单独的形状（这样我就可以在这些形状中插入标签）..在此先感谢..

＆＃13;

.square1 {
  height: 300px;
  width: 600px;
  overflow: hidden;
  margin: -18px;
  border-right: none;
  border-left: none;
}

.square2 {
  height: 300px;
  width: 300px;
  overflow: hidden;
  margin-left: -256px;
  border-left: none;
  border-right: none;
}

.square3 {
  height: 300px;
  width: 600px;
  overflow: hidden;
  margin: -18px;
  border-left: none;
  border-right: none;
  margin-top: -265px;
}

.square4 {
  height: 300px;
  width: 300px;
  overflow: hidden;
  margin-left: -256px;
  border-left: none;
  border-right: none;
}

svg {
  height: 100%;
  width: 100%;
}

polygon {
  fill: aliceblue;
  stroke: crimson;
  stroke-linejoin: round;
}

polygon:hover {
  fill: cornflowerblue;
}

＆＃13;

<body>
  <table>
    <tr>
      <td>
        <div class='square1'>
          <svg viewBox='0 0 150 150'>
          <polygon id="t1" points='5,5 50,50 95,5' />
        
        <polygon id="t2" points='5,5 50,50 5,95' />
        <polygon id="t3" points='5,95 50,50 95,95 50,145' />
        <polygon id="t4" points='95,5 50,50 95,95 145,50' />
      </svg>
        </div>
      </td>
      <td>
        <div class='square2'>
          <svg viewBox='0 0 150 150'>
          <polygon id="t1" points='5,5 50,50 95,5' />
        
        <polygon id="t2" points='' />
        <polygon id="t3" points='5,95 50,50 95,95 50,145' />
        <polygon id="t4" points='95,5 50,50 95,95' />
      </svg>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='square3'>
          <svg viewBox='0 0 150 150'>
          <polygon id="t1" points='' />
        
        <polygon id="t2" points='5,5 50,50 5,95' />
        <polygon id="t3" points='5,95 50,50 95,95' />
        <polygon id="t4" points='95,5 50,50 95,95 145,50' />
      </svg>
        </div>
      </td>
      <td>
        <div class='square4'>
          <svg viewBox='0 0 150 150'>
          <polygon id="t1" points='' />
        
        <polygon id="t2" points='' />
        <polygon id="t3" points='5,95 50,50 95,95' />
        <polygon id="t4" points='95,5 50,50 95,95' />
      </svg>
        </div>
      </td>
    </tr>

  </table>
</body>

＆＃13;

Answer 1

这是固定代码：

.square1 {
  height: 300px;
  width: 600px;
  overflow: hidden;
  margin: -18px;
  border-right:none;
  border-left:none;
}
.square2 {
  height: 300px;
  width: 300px;
  overflow: hidden;
  margin-left: -256px;
  border-left:none;
  border-right:none;
}
.square3 {
  height: 300px;
  width: 600px;
  overflow: hidden;
  margin: -18px;
  border-left:none;
  border-right:none;
     margin-top: -128px;
}
.square4 {
  height: 300px;
  width: 300px;
  overflow: hidden;
  margin-left: -256px;  
  border-left:none;
  border-right:none;
  margin-top:-135px;
  position: relative;
    top: 12px;
  
}

svg {
  height: 100%;
  width: 100%;
}
polygon {
  fill: aliceblue;
  stroke: crimson;
  stroke-linejoin: round;
}
polygon:hover {
  fill: cornflowerblue;
}

<table><tr><td>
<div class='square1'>
  <svg viewBox='0 0 150 150'>
      <polygon id="t1" points='5,5 50,50 95,5' />
    <text x="33" y="26" font-size="20" fill="black" stroke="black" stroke-width=".06">a10</text>
    <polygon id="t2" points='5,5 50,50 5,95' />
    <text x="10" y="56" font-size="20" fill="black" stroke="black" stroke-width=".06">a20</text>
    <polygon id="t3" points='5,95 50,50 95,95 50,145' />
    <text x="36" y="96" font-size="20" fill="black" stroke="black" stroke-width=".06">a30</text>
    <polygon id="t4" points='95,5 50,50 95,95 145,50' />
    <text x="80" y="56" font-size="20" fill="black" stroke="black" stroke-width=".06">a40</text>
  </svg>
</div></td><td>
<div class='square2'>
  <svg viewBox='0 0 150 150'>
      <polygon id="t1" points='5,5 50,50 95,5' />
    
    <polygon id="t2" points='' />
    <polygon id="t3" points='5,95 50,50 95,95 50,145' />
    <polygon id="t4" points='95,5 50,50 95,95' />
  </svg>
</div></td>
</tr>
<tr><td>
<div class='square3'>
  <svg viewBox='0 0 150 150'>
      <polygon id="t1" points='' />
    
    <polygon id="t2" points='5,5 50,50 5,95' />
    <polygon id="t3" points='5,95 50,50 95,95' />
    <polygon id="t4" points='95,5 50,50 95,95 145,55' />
  </svg>
</div></td><td>
<div class='square4'>
  <svg viewBox='0 0 150 150'>
      <polygon id="t1" points='' />
    
    <polygon id="t2" points='' />
    <polygon id="t3" points='5,95 50,50 95,95' />
    <polygon id="t4" points='95,5 50,50 95,95' />
  </svg>
</div></td>
</tr>

</table>

Answer 2

这是一个samle代码，希望你这样做

<div class="diamond"></div>

{{1}}

如何使用Html和Css在正方形（Kundli Design）中设计4个菱形（菱形）和8个三角形

2 个答案: