実用性があるのかないのか分からないけど、普通あんまりやっていない事を、やるのがとっても大好きな、ユゲタです。
とある案件でのデザイン提案で、六角形で作るハニカム構造のメニューというのがあって、cssを使ってどの程度できるのかを試していたところ、2パターンほどやり方があったので、cssコードを貼り付けておきたいと思います。
ちなみに、六角形の事を英語でヘキサゴン、それが束になっている構造体のことをハニカム構造というらしく、このハニカム構造は、蜂の巣や、ダンボールの断面に使われていたりして、非常に強度が強くなる特徴があるようです。
webページでこの構造にする意味はよくわかりませんが・・・
本日のIT謎掛け
「ハニカム構造」と、かけまして・・・
「１時間のうち、１０分毎にCMが入るテレビ番組」と、ときます。
そのココロは・・・
６個のコーナーを持ちます。
六角形構造の作り方パターン
実際にやってみて分かったのは、いくつかの作り方があるという事です。
cssを使わなければ、svgで、正六角形になる座標を結ぶだけでできるので、これが一番ラクなのですが、今回はcssのみで実装する方法を検討するので、このやり方は却下です。
もちろん、canvasも却下ですね。
cssのみという事であれば、以下のパターンで、できます。
1. 疑似要素を使って三角形を足して構築
2. 疑似要素を使って四角形を回転させて構築
ちなみに、今回は、このシンプルなHTML構造に対しての構築を前提にしてみます。
<div class="hexagon"></div>
1. 疑似要素を使って三角形を足して構築
.hexagon{
position: relative;
width : 50px;
height : 100px;
background-color: #39a9d6;
display : inline-block;
margin : 0px 17.5px;
z-index:1;
cursor:pointer;
margin-left:30px;
}
.hexagon:before,
.hexagon:after{
position: absolute;
top: 0;
width: 0;
height: 0;
content: "";
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
z-index:1;
}
.hexagon:before{
left: -35px;
border-right: 35px solid #39a9d6;
}
.hexagon:after{
right: -35px;
border-left: 35px solid #39a9d6;
}
いい感じに作った長方形にbefore,afterを追加して、三角形を追加しています。
この構造のデメリットは、１色ベタ塗りでしかできない点です。
2. 疑似要素を使って四角形を回転させて構築
.hexagon{
position: relative;
width : 58.8px;
height : 100px;
background-color: #39a9d6;
display : inline-block;
margin-left:50px;
}
.hexagon:before,
.hexagon:after{
content:"";
position: absolute;
display:block;
top:0;
left:0;
width : 100%;
height : 100%;
transform-origin:center;
background-color: #39a9d6;
}
.hexagon:before{
transform:rotate(60.0deg);
}
.hexagon:after{
transform:rotate(-60.0deg);
}
基本の四角形と同じサイズの疑似要素を回転させて作っていますが、この方法で作ると、正六角形が作れます。
ただ、元の四角形のサイズを厳密に計算しなければ、角がずれてしまうので、その点が難点ですね。
border-topとborder-bottomで線を書くと、六角形の枠線がかけるので、その点はパターンとしてありがたいですね。
0 件のコメント:
コメントを投稿