Div에 고르지 않은 둥근 모서리를 만들려면 어떻게 해야 합니까?

Div에 고르지 않은 둥근 변 만들기

과제: 다음과 같이 고르지 않은 둥근 변이 있는 DIV를 디자인하세요.

[둥근 부분이 고르지 않은 DIV 이미지 측면]

현재 솔루션:

border-radius를 사용하는 가장 가까운 근사값은 다음과 같습니다.

border-bottom-left-radius: 80% 50px;
border-bottom-right-radius: 30% 30px;

그러나 이렇게 하면 모서리가 둥글게 됩니다. ~도

해결책:

구조용 클립 경로:

원하는 고르지 않은 둥근 면을 만들려면 다음을 고려하십시오. 클립 경로 속성을 사용하면 콘텐츠의 내용을 자르는 기하학적 모양을 정의할 수 있습니다. 요소:

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

이 코드에서:

• 75%는 원의 반경을 정의합니다.
• 65%에서 10%는 원의 중심점을 지정합니다. 요소의 컨테이너를 기준으로 원.

HTML 코드:

<div class="box">
</div>

클립 경로 속성은 원하는 고르지 않은 둥근 측면을 생성하여 특정 요구 사항에 맞게 모양을 조정할 수 있는 유연성을 제공합니다.

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