デザイン Edit : 2018.08.24 Update : 2024.11.07

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

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

Contents

やりたいこと
HTML
CSS

やりたいこと

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

HTML

<div class="sample">
<span><a href="#" class="category tag">GALLERY</a></span>
</div>

<span><a href="#" class="category tag">GALLERY</a></span>

</div>

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

CSS

.sample span {
    display: block;
    padding-bottom: 20px;
}
.sample a {
    pointer-events: none;
    color: #fff;
    font-size: 0.75rem;
    padding: 5px 10px;
}
.sample span a:before {
    background: #0f1432;
    color: #fff;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    -webkit-transform: skew(-30deg);
    transform: skew(-30deg);
    display: inline-block;
    z-index: -1;
}