デザイン
実現
デザイン案によると、部品全体の構造は正六角形と長方形で構成されています。不規則な形は、マウスを乗せると光って見えます。正六角形と長方形だけで効果を得ようとすると、マウスオーバーで下図のようになります：
長方形に六角形の外側のグロー効果、およびデザインが一致しません。そこで、下図のように、発光効果の範囲が長方形の中に入るようにマスクが必要です：
その結果、正六角形が長方形のマスクでブロックされることになり、長方形のマスクの上に正六角形のマスクを重ねる新しいレイヤーを追加する必要がありました。最終的な構造は以下の通り：
一番下のレイヤーはコンポーネント全体のコンテナで、ホバーしたときの外側の輝きを担当します。2番目のレイヤーは六角形のグラフィックで、外側の輝きを表示する役割を果たします。3番目のレイヤーは長方形のマスクで、六角形の外側の輝きをブロックする役割を果たし、4番目のレイヤーはデザインで見た六角形です。
六角形の実現
コンポーネントの全体的な骨組み構造はできたので、あとは六角形を描画する場合にどうするかという問題が残りました。htmlは多角形ラベルの描画を提供していないので、達成するために様々な奇妙なトリックを介して小さな脳を開く必要があることを知っています。css3の世代では良い、あなたは以下のように、正六角形の描画を達成するために長方形を回転させることができます：
これは、3つの長方形を異なる角度で回転させることで実現できます：
- 最初の矩形を0度回転
- 2番目の長方形は60度回転しています。
- 3番目の長方形を-60度回転
その効果は以下の通り：
ここでも問題なのは、長方形を回転させた結果、正六角形にはならず、長方形の縦横比によって奇妙な図形になってしまうことです。そこで、長方形の長さと幅を計算する必要があります。これを下図に示します：
正六角形は6つの正三角形でできています。正三角形の角度はそれぞれ60°です。正六角形を構成する長方形の高さは2sin60° L、すなわち√3L≈1.732 * Lです。
矩形の幅を60pxとすると、高さは1.732*60=103.92となります：
html
<div class="panel__hexagon">
<div class="panel__hexagon-left panel__hexagon-item"></div>
<div class="panel__hexagon-center panel__hexagon-item"></div>
<div class="panel__hexagon-right panel__hexagon-item"></div>
</div>
css
// 六角形のコンテナ
.panel__hexagon {
width: 60px;
height: 104px;
position: relative;
}
// 正六边形 旋转的矩形
.panel__hexagon-item {
width: 100%;
height: 100%;
background: blue;
position: absolute;
top: 0;
left: 0;
}
// 最初の回転した矩形
.panel__hexagon-right {
transform: rotate(60deg);
}
// つ目の回転した矩形
.panel__hexagon-left {
transform: rotate(-60deg);
}
最終コード
html
<!-- 容器 -->
<div class="panel">
<!-- 正六边形外发光 -->
<div class="panel__hexagon panel__hexagon--shadow">
<div class="panel__hexagon-left panel__hexagon-item"></div>
<div class="panel__hexagon-center panel__hexagon-item"></div>
<div class="panel__hexagon-right panel__hexagon-item"></div>
</div>
<!-- 矩形遮罩 -->
<div class="panel__mark"></div>
<!-- 正六边形遮罩 -->
<div class="panel__hexagon">
<div class="panel__hexagon-left panel__hexagon-item"></div>
<div class="panel__hexagon-center panel__hexagon-item"></div>
<div class="panel__hexagon-right panel__hexagon-item"></div>
</div>
</div>
css
//
.panel {
position: relative;
width: 300px;
height: 300px;
margin: 0 100px;
}
//
.panel__mark {
width: 300px;
height: 300px;
background: #fff;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
transition: box-shadow .6s;
}
// 六角形のコンテナ
.panel__hexagon {
width: 60px;
height: 104px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -30px;
z-index: 2;
}
// 正六边形 旋转的矩形
.panel__hexagon-item {
width: 100%;
height: 100%;
background: blue;
position: absolute;
top: 0;
left: 0;
}
// 最初の回転した矩形
.panel__hexagon-right {
transform: rotate(60deg);
}
// つ目の回転した矩形
.panel__hexagon-left {
transform: rotate(-60deg);
}
// 正六边形 外发光容器
.panel__hexagon--shadow {
z-index: 0;
}
// 正六边形 外发光 旋转的矩形
.panel__hexagon--shadow .panel__hexagon-item {
background: transparent;
transition: box-shadow .3s;
}
// hover
.panel:hover .panel__mark,
.panel:hover .panel__hexagon--shadow .panel__hexagon-item {
box-shadow: 0 0 15px rgba(0, 0, 0, .61)
}
