CSS 모서리를 날카롭게했습니다

Question

개체에 날카로운 모서리를 얻기 위해 쉽고 깨끗한 CSS 방법을 사용할 수 있는지 궁금합니다. 지금이 코너와 함께 일하고 있습니다.

.main navigation { 
background-color: #14377d; 
padding-right: 10px; 
padding-left: 10px; 
border-right: solid #2d71ba; 
border-bottom-right-radius: 25px 25px; 
width: 134px; 
line-height: 25px; 
text-align: left; 
} 

하지만 이렇게하면 모서리가 둥글게됩니다. 내가 원했던 것은 오른쪽 하단 모서리 절단입니다. 예 :

이 모든 것을 읽을 시간을내어

감사합니다,

Sjoerd

Answer 1

나는 아마에 대한 clip-path 및 polygon() 사용합니다 :

div { 
 
    background-color: #2C2F33; 
 
    height: 200px; 
 
    width: 300px; 
 
    clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 100%, 0 100%); 
 
}

<div></div>

을

기본적으로 polygon()의 작동 방식은 각 쉼표로 x-y- 위치 : polygon(x1 y1, x2 y2, ...)으로 구분할 수 있습니다. 백분율을 사용하여 주어진 너비 또는 높이의 100 %를 사용하면 선형 모양을 만들 수 있습니다.

Answer 2

당신에게 유용 할 수있는이 기법은 Fiddle Example입니다. 그것은 polygon 함수와 clip-path 속성을 기반으로합니다.

Answer 3

나는

polygon(100% 0, 100% 75%, 90% 100%, 0 100%, 0 0);

감사를 사용하여 종료! 웹 사이트에서 내 탐색을 내가 원하는 곳과 가까운 곳에 위치 시키십시오!