Hakrラボ

科学、ITの中でプログラム、Wordpressテーマやプラグイン用途、関連の制作記事、興味のあるテーマに対しての記事、他様々ITと科学のコラボから更なる新しいアイディア等を書き留めています。実際に使えるものから、応用が効きそうな物まで幅広く書いているので、参考に成れば幸いです。

CSSだけで6角形を作る方法(見た目のみ)

time 2016/08/10

CSSだけで6角形を作る方法(見た目のみ)

プロフィール画像を6角形にしたいとき、Javasqriptを使えば楽にとは言わないまでも比較的簡単に実装できるのですが、今回はCSSで一番楽に作れそうな方法で無理やり作ってみようかと思います。
20160810024721

スポンサードリンク

用意するDIVは6角なので7個になります。最初のものは3重のDIVの格子を作りa等で指定できる範囲もなるべく6角に近づけます。

sample





解り易く色をつけるとこうなります。要は背景が違う色だと丸の中に6角形が見えるようなボタンになります。




sponsored link

down

コメントする





*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ソーシャル関連

パソコン

プログラム

個人的なブログ倉庫



sponsored link

Do NOT follow this link or you will be banned from the site!