[B! CSS][矢印] y-103のブックマーク

y-103 id:y-103

CSSと矢印に関するy-103のブックマーク (2)

[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック
パンくずでよく見かける三角形の実装方法に注目です。今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装三角形をtransf ormで生成三角形をclip-pathで生成三角形をborderで実装まずは、今までの古典的な実装方法です。リスト要素で実装した各アイテムをFlexboxで横並びに配置し、矢印の三角形をborderで実装します。三角形をborderで実装この実装方法は簡単ですが、リンク可能なエリアが矩形になります。そのため、2番目のおしりの三角形は1番目のリンク可能なエリアになって
y-103 2018/09/02
矢印

css

パンくず
リンク
CSSだけで矢印を作ってみた｜デロイトトーマツウェブサービス株式会社（DWS）公式ブログ
ワーキングマザーの池島です。年度末に差し掛かり、保護者会や学校説明会、卒園対策委員などで忙しくしております。現在、自社のコーポレートサイトの制作をしており、初めてやってみることがあったり、試してみたかったことをやってみたりと、スキルアップにも良い機会となっています。そんな中、画像を使わずにCSSを使って矢印を作る機会がありましたので、備忘録も兼ねて、いくつかご紹介したいと思います。サポートブラウザは、基本的に最新のバージョンを想定しています。 ::before や ::after を使わず、別のオブジェクトとして扱えば、もっと古いバージョンでも使えると思います。今回は、HTMLがシンプルにできる方法で考えました。左から右のグラデーション矢印まずは、スタンダードな矢印です。グラデーションを付けてみました。［IE8〜（グラデーションはIE10〜）］ HTML <div clas
y-103 2016/06/06
CSS

矢印
リンク
1

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx