MENU
CLOSE
デザイン Edit : 2018.08.24 Update : 2024.11.07

平行四辺形のタグをCSSでつくる

まず最初に言いたいのは、左右が斜めになっていて、上辺と底辺が平行になっている四角形には「平行四辺形」という名前がついているということです!!!!
私はこの四角形の名前をすっかり忘れており、googleでの検索ワードを若干悩みました。

やりたいこと

下の画像、日付の上にあるような平行四辺形のタグをつくります。

HTML

平行四辺形の中に文字を入れたい場合、タグを入れ子(今回は<span>と<a>)にするのがポイントです!入れ子にしないと平行四辺形にしたいのは外枠だけなのに、中の文字も傾いてしまうからです!
 

CSS

↑上記のコードをそのまま貼り付けて色を変えたのがコレです。いろんな形を駆使したら、デザインのレパートリーが増えそうですね!

Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。