search
New サムネイル 分断するメディアとインターネットのユーザー:ライトノベル、キズナアイ、TikTokに思うこと New サムネイル Golangのchiを使ったrouterの例 New サムネイル Golangの文字列(代入、結合・連結、部分文字列、置換)

CSSで平行四辺形の要素を作る(transformで角度を設定する)

広告

CSS で平行四辺形の要素を作るには、平行四辺形にしたい要素の before に transform を設定する。

.header__category ul li {
    margin-right: 12px;
    padding: 12px 16px;
    position: relative;
}

.header__category ul li:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transform: skewX(-15deg);
    background-color: #f0f0f0;
    border-radius: 8px;
    content: "";
}

ポイントは transform の skewX に入れる角度。ここをマイナスにすると右に傾いた平行四辺形になり、プラスにすると左の傾いた平行四辺形になる。

広告

広告

広告

コンピューター コンピューター
プログラミング プログラミング
数学 数学
英語 英語
国語 国語
理科 理科
社会 社会

Python入門

Python入門

化学入門

化学入門

漢字辞典

漢字辞典

整数辞典

漢字辞典

Lord Candy

Lord Candy