Issue
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)
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">×</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> 01</p>
<p class="p2">AA<br> 02</p>
<p class="p3">AA<br> 03</p>
<p class="p4">AA<br> 04</p>
<p class="p5">AA<br> 05</p>
<p class="p6">AA<br> 06</p>
<p class="p7">AA<br> 07</p>
<p class="p8">AA<br> 08</p>
<p class="p9">AA<br> 09</p>
<p class="p10">AA<br> 10</p>
<p class="p11">AA<br> 11</p>
<p class="p12">AA<br> 12</p>
</div>
Answered By - Pranjal
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.