나는이처럼 내 메뉴 항목을 왜곡하기 위해 노력하고있어

Question

모든 모서리를 왜곡 CSS3 : 나는 나 4 개 코너를 왜곡하게됩니다 몇 가지 해결책을 발견했습니다

하지만 그들은 경계 톱을 사용 솔루션은 그래디언트 때문에 배경 이미지 솔루션을 사용해야합니다.

아무에게도이를 수행하는 방법을 알고 있습니까?

Answer 1

각 코너를 자유롭게 이동할 수는 없지만 skew과 rotate 및 transform-origin을 결합하면 다양한 효과를 만들 수 있습니다. Here's a demo 당신이 공유 한 그림과 비슷한 것입니다.

더 복잡한 것이 필요한 경우 SVG를 사용하는 것이 가장 좋습니다.

Answer 2

당신은

div { 
    width: 400px; 
    height: 200px; 
    background-image: linear-gradient(6deg, blue 19%, transparent 10%), 
     linear-gradient(80deg, green 12%, transparent 10%), 
     linear-gradient(175deg, red 18%, transparent 10%), 
     linear-gradient(275deg, yellow 18%, transparent 10%), 
     linear-gradient(6deg, lightblue 21%, transparent 10%), 
     linear-gradient(80deg, lightgreen 13%, transparent 10%), 
     linear-gradient(175deg, lightcoral 21%, transparent 10%), 
     linear-gradient(275deg, lightyellow 19%, transparent 10%); 
} 

demo