clip-path로 원하는 영역만 표현하기

원하는 형태의 폴리곤 영역만 표시하고자 할때 clip-path를 사용합니다. 예를 들어 아래와 같은 결과를 보면..

위의 결과는 2개의 div 요소로 표현되는데, 아래와 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div>
GIS DEVELOPER
</div>
<div>
GIS DEVELOPER
</div>
<div> GIS DEVELOPER </div> <div> GIS DEVELOPER </div>
GIS DEVELOPER
GIS DEVELOPER

스타일은 다음과 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
position: fixed;
background-color: black;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 5em;
font-weight: 700;
}
div:nth-child(1) {
color: white;
}
div:nth-child(2) {
color: black;
clip-path: circle(1.4em at center center);
background-color: white;
}
* { padding: 0; margin: 0; box-sizing: border-box; } div { position: fixed; background-color: black; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 5em; font-weight: 700; } div:nth-child(1) { color: white; } div:nth-child(2) { color: black; clip-path: circle(1.4em at center center); background-color: white; }
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

div {
    position: fixed;
    background-color: black;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5em;
    font-weight: 700;
}

div:nth-child(1) {
    color: white;
}

div:nth-child(2) {
    color: black;
    clip-path: circle(1.4em at center center);
    background-color: white;
}

clip-path로 지정된 도형의 형태로 잘려진 것만 표시됩니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다