클립 경로 이해

현재 CSS와 함께 HTML을 배우려고 노력 중이며 클립 경로를 발견했습니다. 즉 website입니다.클립 경로 이해

제 생각에 폴리곤 속성과 같은 클립 경로를 사용하면 특정 부분이 렌더링되지 않도록하여 고유 한 배경 컨테이너를 만들 수 있습니다.

그러나 HTML 코드에서 CSS를 직접 복사하려고하면 유사한 문제가 발생하지 않습니다. 제 행동은 단순히 큰 직사각형처럼 행동한다는 것입니다. 왜 그런가요?

<header class="myClass"> 

    <h1>MyHeader</h1> 

    <p>COmments 
    </p> 

    <p>Ever More comments</p> 

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

편집 : 이것은 CSS입니다

이

은 HTML입니다.

@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; 
}

출처

2016-08-29 SomeStudent

질문에 CSS를 넣어야합니다. –

'-webkit-clip-path'를 시도하십시오. 접두사가없는 버전은 FF에서만 지원되는 것으로 보입니다. –

CSS는 여기에 게시되어야합니다. "해당 링크"는 내일 사라질 수 있으며 아무에게도 도움이되지 않습니다. – Rob

이 기능에 대한 브라우저 지원에 대한 정보는 caniuse.com을 참조하십시오. 일부 브라우저에는 공급 업체 접두사가 필요합니다. 예를 들어 Chrome에는 -webkit-clip-path이 필요합니다. MDN page도이 정보를 제공합니다.

스타일 검사기를 통해이를 감지했을 수 있습니다. Chrome은 clip-path 속성을 "invalid property value"로 표시했을 것입니다. Firefox는 접두어가 필요 없습니다.

출처

2016-08-29 20:07:38

-1

크롬의 clip-path 용 CSS는 "-webkit-clip-path"로 지원됩니다.

사용 :

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

브라우저는 이제 효과를 렌더링합니다.

출처

2016-08-29 19:41:40 Sazz

고맙습니다. – SomeStudent

클립 경로 이해

답변

관련 문제