Chart in HTML CSS, Astrological chart Options

[sujatha]

I want to make chart using html css design, I have attached design I tried table, tr, td, it didn't work since it is combination of square and triangle. Is there any way to make this design happen? After this code design, i will take care of value passing to all squares and triangles. I need just that diagram code or support. Thanks for your support.

[sujatha]

Thanks for all your feed backs, yes it is North Indian style Astrological Chart. Nodejs generated Data is ready to pass on each square and triangle. I already created south indian hora chart using table successfully. Just need html , css diagram for that.
Thanks,
Sujatha

[pandy]

Could you show us how a complete chart with data looks? An image would be fine. Just want to get a grip of how it looks.

[pandy]

OK, using CharlesEF's idea, I came up with this. It's messy, but I can't think of another way. And I haven't figured out how to put a border around the whole thing - I think there is one in your image. I'd still like to see how the content looks. Maybe it isn't needed to rotate it back.

Note that when the table is rotated it sticks out of the box, so to speak. It even sticks out of the viewport. Hence the margins. This may make it hard to place on the page.

CODE

table    { transform: rotate(45deg);
           empty-cells: show;
           border-collapse: collapse;
           margin: 10em 0 0 10em }

td       { border: 2px solid;
           width: 6em; height: 6em }

td div   { transform: rotate(-45deg) }

#a .a    { border: none }
#a .b    { border-style: none solid solid none }
#a .c    { border-style: none none solid solid }
#a .d    { border: none }

#b .a    { border-style: none solid solid none }
#b .d    { border-style: none none solid solid }

#c .a    { border-style: solid solid none none }
#c .d    { border-style: solid none none solid }

#d .a    { border-style: none }
#d .b    { border-style: solid solid none none }
#d .c    { border-style: solid none none none }
#d .d    { border-style: none }

HTML

<table>
<tr id="a">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
<td class="d"></td>
</tr>
<tr id="b">
<td class="a"></td>
<td><div>qwerty</div></td>
<td><div>qwerty</div></td>
<td class="d"></td>
</tr>
<tr id="c">
<td class="a"></td>
<td><div>qwerty</div></td>
<td><div>qwerty</div></td>
<tdv class="d"></td>
</tr>
<tr id="d">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
<td class="d"></td>
</tr>
</table>