HOME > > > CSS3 Shapesを使ってみた

CSS3 Shapesを使ってみた

cssshapes

CSS Shapesってなに?

CSS Shapesってなんでしょうか。Webを作るのにCSSは必須ですが、CSSShapes? cssは四角のボックスの中に文字を入れる、ボーダーをつけるというものですが、CSSShapesは丸や三角、その他台形や星型など自由に様々な形にボックスを変更する事ができます。
さらに「CSS Region」を取り入れればその形に文字を流し込む事ができるので、様々なレイアウトが可能になります。
まるで絵本の様なページを作る事もできます。
「CSS Region」の話はまた今度にして、今回は自由にボックスの形を変えられる「CSS Shapes」をご紹介します。

基本のhtmlを記述

基本になるhtmlの記述の例です。


<div id="任意のCSS名"></div>

CSSShapesで丸を描く

CSSShapesで丸を描く場合のCSS


#circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

CSSShapesで三角を描く

CSSShapesで三角を描く場合のCSS


#triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

CSSShapesでパックマンを描く

CSSShapesでパックマンを描く場合のCSS


.pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

ブラウザ対応について

残念ながらIE8以下には対応しておらず、対応しているサイトも見当たりませんでした。
デザインサイトやキャンペーンサイトとしてはありな部分もあると思いますが、まだこれからの技術かもしれません。

記事参考

CSS3 Shapes | CSS3 Shapes Resource

参考にさせて頂きました。ありがとうございました。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.03.04