クリップパスの理解

Question

現在、私はCSSと一緒にHTMLを学習しようとしており、クリップパスを見つけました。つまりwebsiteからです。

私は、ポリゴンアトリビュートなどのクリップパスを使用すると、特定の部分がレンダリングされるのを防ぐことができ、ユニークな背景のコンテナなどを作成できることを理解しています。

しかし、自分のHTMLコードでCSSを直接​​コピーしてみると、同様の現象はありません。私の動作は、単に大きな四角形のように振る舞うということです。何故ですか？

これはHTMLです：

<header class="myClass"> 

    <h1>MyHeader</h1> 

    <p>COmments 
    </p> 

    <p>Ever More comments</p> 

    <p>Yep, ever more lines of code</p> 
</header> 

編集：これはCSSです。

@import url(https://fonts.googleapis.com/css?family=Oswald:300|Arimo); 

html { 
    font-family: 'Arimo', sans-serif; 
    line-height: 1.4; 
} 
body { 
    margin: 0; 
} 

header { 
    color: white; 
    background-color: black; 

    clip-path: polygon(0 0, 100% 4%, 100% 93%, 0 100%); 

    padding: 5%; 
    columns: 3; 
} 

h1 { 
    color: yellow; 
    font-family: 'Oswald', sans-serif; 
} 

Answer 1

この機能のブラウザサポートについてはcaniuse.comを参照してください。一部のブラウザではベンダープレフィックスが必要です。たとえば、Chromeには-webkit-clip-pathが必要です。 MDN pageもこの情報を提供します。

これはスタイルインスペクタで検出できました。 Chromeはclip-pathプロパティを「無効なプロパティ値」として表示していました。 Firefoxにはプレフィックスは必要ありません。

Answer 2

クロムのクリップパスのCSSは、 "-webkit-clip-path"としてサポートされています。

用途：

-webkit-clip-path: polygon(0 0, 100% 4%, 100% 93%, 0 100%); 

ブラウザは今効果をレンダリングします。