Catpow SCSS

background image

clp

クリッピングパスを設定します。傾斜や矢印などの簡易な形状のクリッピングパスを簡単に作成できます。

Params

c
clip-path [chevron]

Keyword
  • l
    left
  • r
    right
  • t
    top
  • b
    bottom

t
clip-path [triangle]

Keyword
  • l
    left
  • r
    right
  • t
    top
  • b
    bottom

s
clip-path [slope]

i
clip-path [inset]

scss
@import 'catpow';

.chevron{
	@include clp((c:l 10%));
}
css
.chevron {
  clip-path: polygon(0% 50%, calc(100% - 10%) 0%, 100% 0%, 10% 50%, 100% 100%, calc(100% - 10%) 100%);
}