클립 경로가있는 CSS 이동 경로 - "음수"좌표가 필요합니다.

Question

clip-path을 사용하여 이동 경로를 만들려고합니다. I는 그 방법의 단순함을 좋아하지만

제공

#clip span { 
 
    padding: 3px 20px; 
 
    background-color: #666; 
 
    color: white; 
 
    display: inline-block; 
 
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); 
 
}

<div id="clip"> 
 
    <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span> 
 
</div>

는

문제는 단어의 길이에 상대적인 좌표 90%에서 유래 . 따라서 "환영합니다!" "작은"것과 같은 화살표 각을 가지지 않습니다.

물론 이전과 이후의 스팬을 고수하는 단어 사이에 빈 블록 두 개를 추가 할 수 있습니다.

과 같은 "geometry"좌표 ​​스타일을 지정하는 방법이 있습니다 (예 : -10px (요소의 오른쪽/아래에서 계산되므로 100px 요소의 경우). 요소의 반대편에서 10 픽셀을 의미하는 90 픽셀을 제공합니까?)

따라서, 규칙은 "기하학"와 같은, (왼쪽/위쪽에서 -10px 수가 있기 때문에, CSS에서 작동하지 않습니다) 같은

clip-path: polygon(0 0, -10px 0, 100% 50%, -10px 100%, 0 100%, 10px 50%); 

Answer 1

일 것입니다 왜 CALC를 사용하지 않는 시도해보십시오 (100 % - 10 픽셀)./전 : 요소 후가 될 것입니다 나는 그것이 문제와 아무 상관이 있지만, 함께 해결책을 알고

#clip span { 
 
    padding: 3px 20px; 
 
    background-color: #666; 
 
    color: white; 
 
    display: inline-block; 
 
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); 
 
}

<div id="clip"> 
 
    <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span> 
 
</div>