div 각도에서 45도 각도로 자름

내 사이트의 대부분의 div 요소의 오른쪽 상단을 잘라내려고합니다. 이 div는 모두 다른 크기입니다. 나는 이것을하는 반응이 빠른 방법을 찾고있다. 이 사이트를 방문한 사람 : http://bennettfeely.com/clippy/으로, 사용자 정의 다각형 모양을 잘라낼 수 있습니다. 여기 div 각도에서 45도 각도로 자름

는 내가 지금까지 무엇을 가지고 :

div { 
 
\t width: 280px; 
 
\t height: 280px; 
 
\t background: #1e90ff; 
 
\t -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%); 
 
clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%); 
 
} 
 

 
/* Center the demo */ 
 
html, body { height: 100%; } 
 
body { 
 
    background-image: url('http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg'); 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
}

<div></div>

내 문제는 내가이 스크랩을 읽고 완벽한 45도 각도를 차단하는 방법을 찾아 시도하고있다

오른쪽 상단 모서리. 현재이 다각형은 자유롭게 만들어졌습니다. 그리고 오른쪽 상단에서 완벽한 45도 각도로 잘라 내기 위해 필요한 백분율을 확인하려고합니다.

해결책으로 나는 대부분의 div, 단추 및 이미지에 컷오프를 추가 할 것입니다.

border-left와 right를 절대 위치로 사용하여 스택 오버플로에서 다른 방법을 찾았지만 일부는 배경 이미지가 있기 때문에 div 컷오프가 투명해야합니다. 여기

최대 설정되어있는 JS 바이올린입니다 : https://jsfiddle.net/xyvz5z8m/1/

출처

2016-08-05 Vince Mamba

나는 그것이 0 % 100 %가 왼쪽 하단, 100 % 100 %가 오른쪽 하단 등등 .. 그래서 45 % 각도로 변환하는 방법을 모르겠다 고 생각합니다. 이게 수학 문제가 될지 모르겠습니다. –

div가 단색 위에 앉아있는 배경입니까? – Shaggy

@Shaggy 항상 그런 것은 아니지만 일부는 배경 이미지가 될 것입니다. 그래서이 일을 조금 더 힘들었습니다. –

대신 백분율의에서 클립을 위치를 해결하기 위해, CSS의 석회질을 사용하여 정확한 45도 클립을 할 수 있어야합니다. 예 :

-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%); 
clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #1e90ff; 
 
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%); 
 
    clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%); 
 
    
 
    /* Resizing this div just to show that this will remain at 45 degrees */ 
 
    animation: resize 5s infinite; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background: #ededed; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
@keyframes resize { 
 
    0%  { width: 100px; height: 100px; } 
 
    25% { width: 50px; height: 100px; } 
 
    50% { width: 50px; height: 50px; } 
 
    75% { width: 150px; height: 50px; } 
 
    100% { width: 100px; height: 100px; } 
 
}

<div></div>

주요 부분 우리가 클립핑 영역의 위치에 대한 화소 크기를 사용하는 것이되고

및 calc(100% - 30px)는 소자의 반대편에서 정확한 위치를 얻기 베어 생각하는 염두에두고 이것은 매우 제한된 브라우저 지원을 가질 수 있습니다.

출처

2016-08-05 14:14:34 DBS

아아아,하지만이 해결책으로 나는 고침 높이가 필요하다. 와 너비가 맞습니까? 예를 들어, 버튼에이 효과를 적용하려면 동일한 모양을 사용하지 마십시오. –

@VinceMamba 이렇게하려면 너비/높이 중 하나만을 백분율로 계산하여 잠재적으로 무언가를 할 수 있지만 잘라 내기 영역의 크기가 같아야합니다. 나는 이것을보고 업데이트 할 수 있는지 살펴볼 것입니다. – DBS

그럴 수 있다면 매우 도움이 될 것입니다! 고맙습니다. –

div 각도에서 45도 각도로 자름

답변

관련 문제