ボタンの配置と形

Question

#やりたいこと
下記画像のようなページを作りたいです。

PCなど大きな画面では上の画像
スマートフォンなど小さい画面では下の画像

それぞれdivで作って、aタグを内包したいと思っています。
divの形が完全に変わりますがBootstrapのグリッドシステムでこのようなことが可能なのでしょうか？
まずCSSでの三角形の作り方が難しく、さらにそれを画像のように繋ぎ合わせることができませんでした。

リンクにする画像は上下とも同じ画像を使い、
はみ出す部分はoverflow: hidden;で対応したいです。

よろしくお願い致します。

Answer 1

結論から言うとSVGかCANVAS使って実装してください。

原則として、HTMLの要素をCSSのみで矩形表現をすることができません。

例外として以下のような方法があります。
１．ボーダーを用いる（あくまでもボーダーなのでグラデか単色）
２．SVG要素の内部で描画する
３．CANVAS要素の内部で描画する
４．Flashなどを用いて描画する（スマホやChromeなど辞めてるのでお勧めしません）

対応していないブラウザなどもあるので、仕様とやりたいこと出来ることを明確化した
上でお調べください。

Comments

[hirotaka612]

やはり厳しいですかね、、
上記の方法を調べてみて、デザイン自体をやり直すことも視野に入れます。
ありがとうございました！