CSS를 사용하여 Div에 고르지 않은 둥근 모서리를 어떻게 만들 수 있습니까?

Div의 고르지 않은 둥근 면: CSS로 비대칭 달성

div에 고르지 않은 둥근 면을 만들려면 테두리 반경을 사용하는 것과 다른 접근 방식이 필요합니다. border-radius를 사용하면 모든 면에서 동일한 곡률이 가능하지만 모양을 더 세밀하게 제어할 수 있는 대체 솔루션을 살펴보겠습니다.

다음에 따라 요소의 모양을 클리핑할 수 있는 CSS 속성인 Clip-path를 소개합니다. 특정 매개변수. 이 속성은 요소 주위에 기하학적 모양을 그려 정의된 모양 외부에 있는 모든 부분을 효과적으로 마스킹함으로써 작동합니다.

코드 예

다음 코드는 다음을 사용하여 고르지 않은 둥근 면이 있는 div를 만드는 방법을 보여줍니다. 클립 경로:

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

<div class="box">

</div>

설명

CSS에서 code:

• circle(75% at 65% 10%)는 div 높이와 너비의 75% 반경을 갖는 원으로 모양을 정의합니다.
• at 키워드 원의 중심 위치를 왼쪽에서 65%, 아래에서 10%로 지정합니다.
• 이렇게 하면 부분적으로만 원이 만들어집니다. div를 겹쳐서 원하는 비대칭 둥근 면을 만듭니다.

이 솔루션은 더 큰 유연성을 제공하고 div에 대해 다양한 비대칭 모양을 만들 수 있습니다.

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