1. ホーム
  2. 質問と答え
  3. HtmlとCssを使って4角形（菱形）と8角形（Kundli Design）をデザインする方法

HtmlとCssを使って4角形（菱形）と8角形（Kundli Design）をデザインする方法

2017-05-12 8 views
1

正方形に4つのダイヤモンド形（菱形）と8つの三角形を挿入したいと思います。スタックオーバーフローで検索することで、私はすでにその90％を設計しています。しかし今、私はPLUNKER DEMOに示されているような問題を抱えていました。 Plunkerに示されている2つの図形に参加したいです。 （私はこれらの形状にラベルを挿入することができるように）誰もが、私はすべての12面の個々の形状の制御を必要とするので、同じPLUNKERのDEMO、を編集ことで、私を助けることができます。..事前に感謝..HtmlとCssを使って4角形（菱形）と8角形（Kundli Design）をデザインする方法

.square1 { 
 
    height: 300px; 
 
    width: 600px; 
 
    overflow: hidden; 
 
    margin: -18px; 
 
    border-right: none; 
 
    border-left: none; 
 
} 
 

 
.square2 { 
 
    height: 300px; 
 
    width: 300px; 
 
    overflow: hidden; 
 
    margin-left: -256px; 
 
    border-left: none; 
 
    border-right: none; 
 
} 
 

 
.square3 { 
 
    height: 300px; 
 
    width: 600px; 
 
    overflow: hidden; 
 
    margin: -18px; 
 
    border-left: none; 
 
    border-right: none; 
 
    margin-top: -265px; 
 
} 
 

 
.square4 { 
 
    height: 300px; 
 
    width: 300px; 
 
    overflow: hidden; 
 
    margin-left: -256px; 
 
    border-left: none; 
 
    border-right: none; 
 
} 
 

 
svg { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
polygon { 
 
    fill: aliceblue; 
 
    stroke: crimson; 
 
    stroke-linejoin: round; 
 
} 
 

 
polygon:hover { 
 
    fill: cornflowerblue; 
 
}
<body> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <div class='square1'> 
 
      <svg viewBox='0 0 150 150'> 
 
      <polygon id="t1" points='5,5 50,50 95,5' /> 
 
     
 
     <polygon id="t2" points='5,5 50,50 5,95' /> 
 
     <polygon id="t3" points='5,95 50,50 95,95 50,145' /> 
 
     <polygon id="t4" points='95,5 50,50 95,95 145,50' /> 
 
     </svg> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class='square2'> 
 
      <svg viewBox='0 0 150 150'> 
 
      <polygon id="t1" points='5,5 50,50 95,5' /> 
 
     
 
     <polygon id="t2" points='' /> 
 
     <polygon id="t3" points='5,95 50,50 95,95 50,145' /> 
 
     <polygon id="t4" points='95,5 50,50 95,95' /> 
 
     </svg> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class='square3'> 
 
      <svg viewBox='0 0 150 150'> 
 
      <polygon id="t1" points='' /> 
 
     
 
     <polygon id="t2" points='5,5 50,50 5,95' /> 
 
     <polygon id="t3" points='5,95 50,50 95,95' /> 
 
     <polygon id="t4" points='95,5 50,50 95,95 145,50' /> 
 
     </svg> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class='square4'> 
 
      <svg viewBox='0 0 150 150'> 
 
      <polygon id="t1" points='' /> 
 
     
 
     <polygon id="t2" points='' /> 
 
     <polygon id="t3" points='5,95 50,50 95,95' /> 
 
     <polygon id="t4" points='95,5 50,50 95,95' /> 
 
     </svg> 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 
    </table> 
 
</body>
ここ

出典

2017-05-12 Shailesh Bhat

答えて

1

固定コードである：

.square1 { 
 
    height: 300px; 
 
    width: 600px; 
 
    overflow: hidden; 
 
    margin: -18px; 
 
    border-right:none; 
 
    border-left:none; 
 
} 
 
.square2 { 
 
    height: 300px; 
 
    width: 300px; 
 
    overflow: hidden; 
 
    margin-left: -256px; 
 
    border-left:none; 
 
    border-right:none; 
 
} 
 
.square3 { 
 
    height: 300px; 
 
    width: 600px; 
 
    overflow: hidden; 
 
    margin: -18px; 
 
    border-left:none; 
 
    border-right:none; 
 
    margin-top: -128px; 
 
} 
 
.square4 { 
 
    height: 300px; 
 
    width: 300px; 
 
    overflow: hidden; 
 
    margin-left: -256px; 
 
    border-left:none; 
 
    border-right:none; 
 
    margin-top:-135px; 
 
    position: relative; 
 
    top: 12px; 
 
    
 
} 
 

 
svg { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
polygon { 
 
    fill: aliceblue; 
 
    stroke: crimson; 
 
    stroke-linejoin: round; 
 
} 
 
polygon:hover { 
 
    fill: cornflowerblue; 
 
}
<table><tr><td> 
 
<div class='square1'> 
 
    <svg viewBox='0 0 150 150'> 
 
     <polygon id="t1" points='5,5 50,50 95,5' /> 
 
    <text x="33" y="26" font-size="20" fill="black" stroke="black" stroke-width=".06">a10</text> 
 
    <polygon id="t2" points='5,5 50,50 5,95' /> 
 
    <text x="10" y="56" font-size="20" fill="black" stroke="black" stroke-width=".06">a20</text> 
 
    <polygon id="t3" points='5,95 50,50 95,95 50,145' /> 
 
    <text x="36" y="96" font-size="20" fill="black" stroke="black" stroke-width=".06">a30</text> 
 
    <polygon id="t4" points='95,5 50,50 95,95 145,50' /> 
 
    <text x="80" y="56" font-size="20" fill="black" stroke="black" stroke-width=".06">a40</text> 
 
    </svg> 
 
</div></td><td> 
 
<div class='square2'> 
 
    <svg viewBox='0 0 150 150'> 
 
     <polygon id="t1" points='5,5 50,50 95,5' /> 
 
    
 
    <polygon id="t2" points='' /> 
 
    <polygon id="t3" points='5,95 50,50 95,95 50,145' /> 
 
    <polygon id="t4" points='95,5 50,50 95,95' /> 
 
    </svg> 
 
</div></td> 
 
</tr> 
 
<tr><td> 
 
<div class='square3'> 
 
    <svg viewBox='0 0 150 150'> 
 
     <polygon id="t1" points='' /> 
 
    
 
    <polygon id="t2" points='5,5 50,50 5,95' /> 
 
    <polygon id="t3" points='5,95 50,50 95,95' /> 
 
    <polygon id="t4" points='95,5 50,50 95,95 145,55' /> 
 
    </svg> 
 
</div></td><td> 
 
<div class='square4'> 
 
    <svg viewBox='0 0 150 150'> 
 
     <polygon id="t1" points='' /> 
 
    
 
    <polygon id="t2" points='' /> 
 
    <polygon id="t3" points='5,95 50,50 95,95' /> 
 
    <polygon id="t4" points='95,5 50,50 95,95' /> 
 
    </svg> 
 
</div></td> 
 
</tr> 
 

 
</table>
ここ

出典

2017-05-12 05:35:16

+0

を行う願っていますおかげで...たくさん –

+0

が、私はそう各shapes..If用の標識を含むことができる私を助け、samleコードですあなたは@Sahil –

+0

をを使って投稿し、そのx = ""、y = ""ラベルを追加することができます。私の答えを更新してください。親切にチェックしてください –

0

は、あなたがこの

.diamond { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    width: 0; 
 
    height: 0; 
 
    position: relative; 
 
    top: 0; 
 
    border: 50px solid rgba(0,0,0,0); 
 
    border-top-width: 0; 
 
    border-bottom: 70px solid #1abc9c; 
 
    font: normal 100%/normal Arial, Helvetica, sans-serif; 
 
    color: rgba(0,0,0,1); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
} 
 

 
.diamond::after { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    width: 0; 
 
    height: 0; 
 
    position: absolute; 
 
    content: ""; 
 
    top: 70px; 
 
    left: -50px; 
 
    border: 50px solid rgba(0,0,0,0); 
 
    border-top: 70px solid #1abc9c; 
 
    font: normal 100%/normal Arial, Helvetica, sans-serif; 
 
    color: rgba(0,0,0,1); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    text-shadow: none; 
 
}
<div class="diamond"></div>

出典

2017-05-12 07:29:32

+0

答えを試みてくれてありがとう... –

関連する問題

 関連する問題