前回、CSSで三角形を作りましたが
使い道がなかったので
三角形で六角形を作ってアニメーションさせてみました。
jQueryを使用しています。
CSSで三角形を作る（基本）
CSSで簡単に三角形を作れます。
上向き
下向き
左向き
右向き
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<style> .triangle { width: 100px; height: 85px; } .triangle1 { border-bottom: 85px solid #808080; border-right: 50px solid transparent; border-left: 50px solid transparent; } .triangle2 { border-top: 85px solid #808080; border-right: 50px solid transparent; border-left: 50px solid transparent; } .triangle3 { border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 85px solid #808080; } .triangle4 { border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 85px solid #808080; } </style> <div class="triangle triangle1"></div> 上向き <div class="triangle triangle2"></div> 下向き <div class="triangle triangle3"></div> 左向き <div class="triangle triangle4"></div> 右向き |
これを応用して六角形を作って遊んでみました。
CSSで三角形を作る（応用）