Понимание клипа

Question

В настоящее время я пытаюсь выучить HTML вместе с CSS и натолкнулся на клип-пути. А именно из этого website.

Я понимаю, что использование клипов, таких как атрибут polygon, позволяет предотвратить отображение определенных частей, что позволяет создавать уникально выглядящие фоновые контейнеры или так далее.

Однако, когда я пытаюсь сделать это в своем 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> 

Edit: Это 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 для клипа в chrome поддерживается как «-webkit-clip-path».

Использование:

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

Браузер теперь будет оказывать эффект.