【CSS】1DIVで作る!を目指す、いろいろな図形:台形、円柱、紙【図形】【1DIV】


このページでは

  • 台形 (1DIV)
  • 円柱 (1DIV)


の提供をお送りします。

最後におまけがあるかも?

※若干、錯視っぽいことを利用して、省エネしていることをご了承ください。

trapezoid
cylinder
paper

台形

考え方

四角をborderで作り、3次元で奥に倒すだけ。

文字は、小さいと見にくくなるので、divを分けて調整するのもいいかと思います。

同様に
平行四辺形もskewXで、
ひし形は skewX/skeyY変換+回転で、確か行けたと思います。

trapezoid
trapezoid
trapezoid
trapezoid

円柱

考え方

四角をborderでつくり、上下(縦型の場合)をradiusで丸くするだけ。

文字の位置は、paddingするか、div等を分けて調整する形になると思います。

cylinder
cylinder
cylinder
cylinder

考え方

四角を作り、shadowで、複製するだけにしたかったけど奥行調整が失敗するので、3つのDIVで。

※1 div だと、位置調整の手間が省けるのでしたかったという意味↑。

参考リンク

Stacked Paper Effect | CSS-Tricks
https://css-tricks.com/snippets/css/stack-of-paper/

paper
1div

ソース群

ソースはこちら

git ソース

おまけ

人型アイコン

※べたです。1DIVでもありません。。


evil

human


Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

112 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です