.clip-path-right {
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}
.clip-path-left {
clip-path: polygon(100% 0, 0 20%, 0 100%, 100% 80%);
}
.clip-path-title-left {
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}
.clip-path-title-right {
clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
}
.clip-angle-left {
clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.clip-angle-right {
clip-path: polygon(100% 100%, 0 0, 0 100%);
}
clip-path に影を追加する
clip-path に影をつけようとしても shadow は効果がないことがわかります。clip-path に影をつけるためには filter というコマンドを使用する必要があります。
具体的には clip-path を適応した画像を div で囲って、この div に対して filter を適応させます。
.clip-shadow {
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .2));
}
最終更新日: 2025-12-05