javascriptjqueryhtmlcss

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

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)
enter image description here

HTML

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

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