Shailesh Bhat Shailesh Bhat - 5 months ago 19
CSS Question

How to design 4 diamond shapes(rhombus) and 8 triangles in a square(Kundli Design) using Html and Css

I want to insert 4 Diamond Shapes(Rhombus) and 8 Triangles in a Square. By searching in stack overflow, I have already designed 90% of it. But now, I stuck with a problem which is as shown in PLUNKER DEMO. I want to join the 2 Shapes shown in Plunker. Can anyone help me, by editing the same PLUNKER DEMO, since I need the control of all 12 individual shapes(so that I can insert a label in those shapes)..Thanks in Advance..

HTML

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


CSS

<style>

.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;
}
</style>

Answer Source

Here is the fixed code:

.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' />
    
    <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,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>