How to Draw Kundli Design (diamonds and triangles in square) using HTML and CSS?

Question

How to draw a Kundli Design using HTML and CSS. I tried it using simple tables but its didn't work. here is my code for it.

Fiddle Link
http://codepen.io/anon/pen/gLOGVp

Kundli Design (which I want to achieve)

<div class="row">
  <div class="col-md-6">
    <table border="1" width="100%">
      <tr>
        <td>1<br />ABC<br />123<br />!@#$</td>
        <td>2<br />ABC<br />123</td>
      </tr>
      <tr>
        <td>3<br />ABC<br />123</td>
        <td>4<br />ABC<br />123</td>
      </tr>
    </table>
  </div>
  <div class="col-md-6">
    <table border="1" width="100%">
      <tr>
        <td>9<br />ABC<br />123</td>
        <td>10<br />ABC<br />123<br />!@#$</td>
      </tr>
      <tr>
        <td>11<br />ABC<br />123</td>
        <td>12<br />ABC<br />123</td>
      </tr>
    </table>
  </div>
</div>
<br />
<div class="row">
  <div class="col-md-6">
    <table border="1" width="100%">
      <tr>
        <td>5<br />ABC<br />123<br />!@#$</td>
        <td>6<br />ABC<br />123<br />!@#$</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8<br />ABC<br />123</td>
      </tr>
    </table>
  </div>
  <div class="col-md-6">

  </div>
</div>

<!-- Modal -->
<div class="modal myModal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

.main {
            height: 250px;
            width: 250px;
            border: 3px solid #000;
            margin: 100px auto;
            float: none;
            overflow: hidden;
        }
        
        .sub {
            height: 175px;
            width: 175px;
            border: 3px solid #000;
            transform: rotate(45deg);
            margin-left: 37px;
            margin-top: 37px;
        }
        
        .line1 {
            height: 10px;
            width: 360px;
            border-bottom: 3px solid #000;
            transform: rotate(135deg);
            margin-top: -95px;
            margin-left: -50px;
        }
        
        .line2 {
            height: 10px;
            width: 380px;
            border-top: 3px solid #000;
            transform: rotate(-135deg);
            margin-left: -50px;
            margin-top: -10px;  
        }
        p{
            margin: 0;
        }
        .p1{
            margin-top: -130px;
            margin-left: 50px;
        }
        .p2{
            margin-top: -35px;
            margin-left: 180px;
        }
        .p3{
            margin-left: 10px;
        }
        .p4{
            margin-top: -35px;
            margin-left: 110px;
        }
        .p5{
            margin-top: -35px;
            margin-left: 215px;
        }
        .p6{
            margin-top: 20px;
            margin-left: 45px;
        }
        .p7{
            margin-top: -35px;
            margin-left: 170px;
        }
        .p8{
            margin-top: 20px;
            margin-left: 10px;
        }
        .p9{
            margin-top: -35px;
            margin-left: 110px;
        }
        .p10{
            margin-top: -35px;
            margin-left: 215px;
        }
        .p11{
            margin-top: 5px;
            margin-left: 50px;
        }
        .p12{
            margin-top: -35px;
            margin-left: 180px;
        }

<div class="main">
        <div class="sub"></div>
        <div class="line1"></div>
        <div class="line2"></div>
        
        <p class="p1">AA<br>&nbsp;01</p>
        <p class="p2">AA<br>&nbsp;02</p>
        <p class="p3">AA<br>&nbsp;03</p>
        <p class="p4">AA<br>&nbsp;04</p>
        <p class="p5">AA<br>&nbsp;05</p>
        <p class="p6">AA<br>&nbsp;06</p>
        <p class="p7">AA<br>&nbsp;07</p>
        <p class="p8">AA<br>&nbsp;08</p>
        <p class="p9">AA<br>&nbsp;09</p>
        <p class="p10">AA<br>&nbsp;10</p>
        <p class="p11">AA<br>&nbsp;11</p>
        <p class="p12">AA<br>&nbsp;12</p>
    </div>

Answer 2

I think it will be hard to achieve this with a <table>. Use multiple div and position them.

Here a little help :

body{
padding:50px;  
}

.container:{
position:relative;
}

.losange{
width:100px;
height:100px;
border:solid 1px black;
transform:rotate(45deg);
position:absolute;
top:22px;
}

.triangle{
border-top:solid 1px black;
position:absolute;;
overflow:hidden;
width:142px;
height:100px;
top:0px;
left:110px;
}

.triangle div{
width:100px;
height:100px;
border:solid 1px black;
transform:rotate(45deg);
top:-50px;
left:20px;
position:absolute;
}

<div class="container">
    <div class="losange"></div>

    <div class="triangle"><div></div></div>
</div>