ウェブページ上に「Fork me on GitHub」のようなリンクを設置する、GitHub Ribbons系のツールについてまとめました。

GitHub Ribbons

GitHub自身が提供しているものです。
リボン部分は画像になっているので、後に紹介するCSS製のものを使うことをおすすめします。

Fork me on GitHub CSS Ribbon

GitHub RibbonsをCSSで再現したものです。
CSS製なので、色やテキストを柔軟に変更することができます。

こちらもCSS製ですが、レスポンシブデザインに対応しています。
画面の横幅が充分ではない場合はインライン表示になるので、コンテンツの上に重なって表示されることを防げます。

こちらは、「Fork me on GitHub」というテキストのかわりにOctocatアイコンのみになっています。
マウスオーバーすると足が動くのがかわいいですね。

See the Pen Untitled by Munieru (@munieru_jp) on CodePen.

そのままだとリンクの範囲が背景を含む領域になっていますが、CSSに以下のコードを追加することで、リボン部分のみにすることができます。¹

.github-corner svg {
  clip-path: polygon(0 0, 100% 0, 100% 100%)
}

名前	描写	ラベル	リンクの範囲
GitHub Ribbons	画像	テキスト	背景を含む領域
Fork me on GitHub CSS Ribbon	CSS	テキスト	リボン部分のみ
Pure CSS responsive "Fork me on GitHub" ribbon	CSS	テキスト	リボン部分のみ
GitHub Corners	CSS	アイコン	背景を含む領域