CSSでいろんなカタチを表現してみる

CSSで色んなカタチを表現してみる

CSS3の新たなプロパティ「transform」と「border-radius」を使って、CSSのみでいろんなカタチを表現できるようになりました。すべてを暗記するのも大変なのでコピペで再利用できるようにメモしておきたいと思います。




DEMO

 

  1. 正方形 -Square-
  2. 長方形 -Rectangle-
  3. 円形 -circle-
  4. 楕円形 -oval-
  5. 三角形(上) -Triangle Up-
  6. 三角形(下) -Triangle Down-
  7. 三角形(右) -Triangle Right-
  8. 三角形(左) -Triangle Left-
  9. 三角形(左上) -Triangle TopLeft-
  10. 三角形(右上) -Triangle Topright-
  11. 三角形(左下) -Triangle BottomLeft-
  12. 三角形(右下) -Triangle Bottomright-
  13. 湾曲した矢印 -Curved Tail Arrow-
  14. 台形 -Trapezoid-
  15. 平行四辺形 -Parallelogram-
  16. 星型 -6points-
  17. 星型 -5points-
  18. ペンタゴン -Pentagon-
  19. 六角ヘキサゴン -Hexagon-
  20. 八角オクタゴン -Octagon-
  21. ハート型 -Heart-
  22. 無限大 -Infinity-
  23. ひし形 -Diamond Square-
  24. ひし形(鋭)-Diamond Narrow-
  25. 卵型-Egg-
  26. パックマン型-PacMan-
  27. 会話吹き出し-TalkBubble-
  28. ポイントバースト-PointBurst-
  29. TVスクリーン-TV Screen-
  30. 拡大鏡-MagnifyingGlass-
  31. 月-Moon-
  32. フラグ-Flag-

 

 

1.正方形 -Square-

正方形

 

2.長方形 -Rectangle-

 長方形

 

3.円形 -circle-

円形

 

4.楕円形 -oval-

楕円形

 

5.三角形(上) -Triangle Up-

三角形

 

6.三角形(下) -Triangle Down-

三角形

 

7.三角形(右) -Triangle Right-

三角形

 

8.三角形(左) -Triangle Left-

三角形

 

9.三角形(左上) -Triangle TopLeft-

三角形

 

10.三角形(右上) -Triangle Topright-

三角形

 

11.三角形(左下) -Triangle BottomLeft-

三角形

 

12.三角形(右下) -Triangle Bottomright-

三角形

 

13.湾曲した矢印 -Curved Tail Arrow-

湾曲した矢印

 

14.台形 -Trapezoid-

台形

 

15.平行四辺形 -Parallelogram-

平行四辺形

 

16.星型 -6points-

星型

 

17.星型 -5points-

星型

 

18.ペンタゴン -Pentagon-

ペンタゴン

 

19.六角ヘキサゴン -Hexagon-

六角ヘキサゴン

 

20.八角オクタゴン -Octagon-

八角オクタゴン

 

21.ハート型 -Heart-

ハート型

 

22.無限大 -Infinity-

無限大

 

23.ひし形 -Diamond Square-

ひし形

 

24.ひし形(鋭)-Diamond Narrow-

ひし形(鋭)

 

25.卵型-Egg-

卵型

 

26.パックマン型-PacMan-

パックマン型

 

27.会話吹き出し-TalkBubble-

会話吹き出し

 

28.ポイントバースト-PointBurst-

ポイントバースト

 

29.TVスクリーン-TV Screen-

TVスクリーン

 

30.拡大鏡-MagnifyingGlass-

拡大鏡

 

31.月-Moon-

月

 

32.フラグ-Flag-

 フラグ

 

ずらずら~っと、羅列になってしまいましたが使いたい時に、サイズや色を変更しながら再利用できそうですね。

以上になります。

 

▼こちらを参考にさせて頂きました

 

mororeco > CSS > CSSでいろんなカタチを表現してみる