CSS를 사용하여 모서리가 고르지 않은 Div를 어떻게 만들 수 있나요?

둥근 모서리가 고르지 않은 Div 생성

border-radius를 사용하면 div에 둥근 모서리를 제공할 수 있지만, 고르지 않은 모서리를 얻으려면 다른 접근 방식이 필요합니다. . 효과적인 솔루션 중 하나는 클립 경로 속성을 활용하는 것입니다.

클립 경로 사용

클립 경로를 사용하면 요소에서 특정 모양을 잘라 효과적으로 숨길 수 있습니다. 초과 면적. 고르지 않은 둥근 면을 만들려면 중심이 div 가장자리에서 오프셋된 원 모양을 사용하세요. 예를 들어:

.box {
  height: 200px;
  width: 200px;
  background: blue;
  clip-path: circle(75% at 65% 10%);
}

이 CSS 코드는 둥근 면이 고르지 않은 "상자"를 정의합니다.

• 원 모양의 반경은 75%이지만 중심은 오프셋 65입니다. div의 왼쪽 상단에서 가로로 %, 세로로 10%.
• "파란색" 배경은 전체 div를 채우지만 원 모양 내의 영역이 표시됩니다.

circle()의 값을 조작하여 둥근 모서리의 모양과 위치를 미세 조정할 수 있습니다. 이 접근 방식은 div에 사용자 정의 둥근 면을 생성하는 유연한 방법을 제공하여 제공한 예와 같은 디자인을 얻을 수 있습니다.

위 내용은 CSS를 사용하여 모서리가 고르지 않은 Div를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!