memo

・borderで三角形を2個作って隣り合わせている(一つは擬似要素)。

・a要素で囲んだ時、リンク領域は「菱形の部分」をはみ出してしまう。

memo

・一つのブロックを4分割し、斜めの半分をグラデーションで透過している。

・グラデーションのdeg値は小さくする(シャギーがでる為)。315deg → -45deg

・transitionプロパティはグラデーションに効かない。

・サイズによるもの(奇数・偶数)の可能性があるが、形がややいびつになる。

・a要素で囲んだ時、リンク領域は「菱形の部分」をはみ出してしまう。

memo

・正方形を45度回転させ、テキスト部分を-45度して水平にしている。

・元サイズが基準となる為、対角線の長さ(一辺の長さ×√2)を考慮する必要がある。

・元の長さから「対角線の長さ-一辺の長さ」だけ左右に飛び出る。

・テキストをのせた場合、ブラウザによってホバー時にちらつきが生じる。

・overflow:hiddenを指定で、a要素で囲んだときにもリンク領域ははみ出さない。

memo

・webkit系のブラウザのみ対応。

・鏡面反射させているため、子要素にテキストがあるとそれらも反転してしまう。

・非常に不安定で、うまくレンダリングされない時がある。ホバー時もおかしい。

・a要素で囲んだ時、リンク領域は反射面に及ばない(上の例では左半分のみ)。