如何使用HTML和CSS绘制Kundli设计（方形中的菱形和三角形）？

时间：2016-11-04 10:24:00

标签： javascript jquery html css

如何使用HTML和CSS绘制Kundli设计。我尝试使用简单的表，但它没有工作。这是我的代码。

小提琴链接
http://codepen.io/anon/pen/gLOGVp

Kundli Design（我希望实现）
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>

4 个答案:

答案 0 :(得分：4)

＆＃13;
＆＃13; 
.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;
        }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

我认为使用<table>很难实现这一目标。使用多个div并定位它们。

这里有一点帮助：

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>

答案 2 :(得分：1)

最简单的方法是使用svg。这是一个例子

svg {
  border: 1px solid black;
}

line {
  stroke: black;
  stroke-width: 1;
}
<svg height="200" width="200">
  <line x1="0" y1="0" x2="200" y2="200"/>
  <line x1="200" y1="0" x2="0" y2="200"/>
  <line x1="0" y1="100" x2="100" y2="0"/>
  <line x1="100" y1="200" x2="200" y2="100"/>
  <line x1="100" y1="0" x2="200" y2="100"/>
  <line x1="0" y1="100" x2="100" y2="200"/>
</svg>

我也喜欢使用像Alexis建议的div和变换，但它更棘手。这就是我所要做的，从这一点来说，它只是调整翻译数字。

div {
  padding: 0;
  margin: 0;
}

.box {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

.even .f {
  transform: translate(-6px,3px) rotate(-45deg);
}

.odd .f {
  transform: translate(3.5px,-7.5px) rotate(-45deg);
}

.even .b {
  transform: translate(-10.5px,3px) rotate(45deg);
}

.odd .b {
  transform: translate(-20px,-7.5px) rotate(45deg);
}

.trail {
  transform: translate(0,-21.5px);
}

.f, .b {
  border-top: 1px solid black;
  height: 20px;
  width: 20px;
  display: inline-block;
}
<div class="box">
  <div class="even">
    <div class="b"></div>
    <div class="f"></div>
    <div class="b"></div>
    <div class="f"></div>
  </div>
  <div class="odd">
    <div class="f"></div>
    <div class="b"></div>
    <div class="f"></div>
    <div class="b"></div>
  </div>
  <div class="even trail">
    <div class="b"></div>
    <div class="f"></div>
    <div class="b"></div>
    <div class="f"></div>
  </div>
  <div class="odd trail">
    <div class="f"></div>
    <div class="b"></div>
    <div class="f"></div>
    <div class="b"></div>
  </div>
</div>

答案 3 :(得分：0)

查看jCanvas（jQuery绘图库），特别是how to draw paths。

您必须添加canvas元素并使用JavaScript进行绘制。

see example here

相关问题
最新问题