要素を三分割する魔法のCSSファンクション!?

Webサイトをマークアップしているとデザインによって三分割する場面があります。

これまでは下記のようにCSSを記述してました。

しかし、もっと綺麗な記述方法はないのかと調べてると発見!!

この方法は3分の1のように指定できる【calc()ファンクション】というのがありました。

 

[対応ブラウザ]

  • IE9以降
  • Chrome19より25まで-webkit-のベンダー識別子付きで先攻実装(Chrome26よりサポート)
  • Firefox4より15まで-moz-のベンダー識別子付きで先攻実装(Firefox16よりサポート)
  • Safari6.0より-webkit-のベンダー識別子付きで先攻実装(Safari6.1, Safari7.0よりサポート)

 

[記述方法]

これだけで綺麗に三分割が可能になります!ん~便利(*’▽’)/