ミギムキ

[CSS] コピペで使える平行四辺形の見出し

サンプルコード

.parallelogram { display: inline-block; position: relative; z-index: 1; padding: 0px 1em; color: #fff; font-weight: bold; } .parallelogram:before { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: -1; transform: skewX(-20deg); background-color: #3388dd; content: ""; }
スポンサー広告

仕組み、解説、補足など