CSS Clip-Path Generator

シェイプタイプ

多角形設定

6

アニメーション

アニメーション有効
3s

プリセット

CSS Code

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

使い方

.element {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transition: clip-path 0.3s ease;
}