CSS를 사용한 얼룩 모양

이 기사에서는 CSS를 사용하여 Blob 모양을 만드는 방법에 대해 이야기하겠습니다.

이것부터 시작합시다. 이를 달성하기 위해 border-radius 라는 잘 알려진 CSS 속성을 사용할 것입니다. 예, 올바르게 읽었습니다. 우리는 단지 border-radius로 할 수 있습니다. 이것이 어떻게 작동하는지 이해하려면 먼저 속성을 심층적으로 이해해야 합니다.

경계 반경에 대해 배우기

테두리 반경을 사용하여 요소의 모서리를 둥글고/부드럽게 만듭니다. HTML의 각 요소에는 네 개의 모서리(왼쪽 위, 오른쪽 위, 오른쪽 아래 및 왼쪽 아래)가 있습니다. 이 속성을 여러 가지 방법으로 사용할 수 있습니다. 예를 들어,

// one value (all 4 corners)
border-radius: 10px;
// four values (top-left top-right bottom-right bottom-left)
border-radius: 10px 20px 30px 40px;

작동 방식

이 구문은 속기일 뿐입니다. 이미 알고 있듯이 단일 속성을 사용하여 4개의 경계 반경을 모두 적용합니다. 따라서 단일 모서리(왼쪽 상단)에 적용하려면 다음을 수행할 수 있습니다.

border-top-left-radius: 10px;

여기서 하는 일은 왼쪽 위 모서리에서 오른쪽 아래로 10px 이동하여 둥근 모양을 만듭니다.

학습 향상

그래서 우리는 border-radius의 기초를 배웠습니다. 그러나 우리는 이것에 대해 다른 값을 전달할 수 있다는 또 다른 이야기가 있습니다.

border-top-left-radius: 10px 20px;

이제 여기서 하는 일은 오른쪽으로 10px, 아래로 20px 이동하고 둥근 모양으로 연결하는 것입니다.

얼룩 모양 만들기

우리는 속기에 대해 배웠지만, 속기를 쓰지 않을 것입니다, 그렇죠? 여기서 질문은 border-radius 속성에서 직접 이 작업을 수행할 수 없습니까? 대답은 우리가 할 수 있다는 것입니다. 이 예제를 보면서 구문에 대해 알아봅시다.

border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;

슬래시(/) 뒤의 각 값은 해당 값에 매핑됩니다. 이것은 이것으로 귀결됩니다.

border-top-left-radius: 10px 40px;
border-top-right-radius: 20px 30px;
border-bottom-right-radius: 30px 20px;
border-bottom-left-radius: 40px 10px;

이것을 더 재미있게 만들자

자, 이제 CSS로 얼룩 모양을 만드는 방법을 배웠습니다. 더 재미있게 만들기 위해 애니메이션, 전환 및 호버 효과 등을 추가할 수 있습니다. 유사 요소가 포함된 간단한 호버 효과가 있는 이 항목codepen을 확인하십시오.

이 기사가 도움이 되고 새로운 것을 배웠기를 바랍니다. 당신은 나와 연결할 수 있습니다