ふと、 html 5 で単純なゲームを作ってみたくなりました。その際、盤面の描写はなるべく css でやってみようと思っています。
以下の画像は、Wikipedia の囲碁のページから取得してきたものです。
今、この画像を css でどうにか描写できないかな、と考えています。イメージ、それぞれの石の置くところを div で block として表現して、それぞれのブロックを、以下の様な分割した画像で描写していけば、ひとまず実現できそうだ、と思ってはいるのですが、ここでふと、このようなブロックの中に線があるようなブロックは、css で描写できるものなのだろうか、と疑問に思いました。
質問
- 拡大・縮小しても表示が荒れない
- ブロックの中にシンプルなオブジェクト(今回は直線を表す四角形)を何個か表示
を実現したいときに、 css でこれを実現する方法はありますか?