角丸君

巷で流行の角丸.一般的な実装は,画像だったりCSSだったりJavaScriptだったりですが,Rubyでもなんとかできないかと.まぁ結局実装はCSSになっちゃうんですけど.


じゃぁ利点なんてほとんどないじゃねーかって話ですが,まぁ少しは汎用性があると期待しながら,ツレツレと書いてみた.

def nifty_corner(top = true, color = '#000', background = '#fff', width = 100)
  nifty = "<b style = \"display:block; background:#{background};"
  if width
    nifty += " width:#{width}px;\">\n"
  else
    nifty += "\">\n"
  end

  pblock = lambda do |n|
    return if n == 4
    if n != 1
      nifty += "  <b style = \"display:block; height: 1px;" +
        " overflow: hidden; margin: 0 #{n}px; background:#{color}\"></b>\n"
    else
      nifty += "  <b style = \"display:block; height: 2px;" +
        " overflow: hidden; margin:0 1px; background:#{color}\"></b>\n"
    end
  end

  if top
    5.downto(1) do |n|
      pblock.call(n)
    end
  else
    1.upto(5) do |n|
      pblock.call(n)
    end
  end
  return nifty += "</b>\n"
end

第一引数は,上向き(俗に言うtop)か,下向きか(俗に言うbottom).第二引数は角丸の色,第三引数は,背景の色.で,第四引数は幅.
上向き,下向きを:top,:bottomみたいにシンボルで渡すのもカッコいいかもなぁ.
これをApplicationHelperに追加して,

<%= nifty_corner(true, "blue", "black", 300) %>

みたいにすると,ゴチャゴチャっとHTMLに書き込まれるという.
蟻の数ほど角丸が書きたいって人は,お試しアレ.