경계선 또는 배경에 CSS로 물결무늬 적용하는 방법

Question

사이트 배경이나 경계선을 곡선이나 무늬로 적용하는 경우가 있는데요.

아래 예시사이트 같은 경우에는 상단 곡선은 투명배경 이미지로 적용한 것으로 보입니다.

http://www.donghwakids.co.kr/main/main.html?

메뉴바 부분의 곡선 물결무늬 같은 부분을 CSS로 구현해보려면 어떻게 하면 될까요?

또한 이런 효과를 뭐라고 검색하면 찾을 수 있을까요?

swallow · Accepted Answer

header_bg.png (65×105) (donghwakids.co.kr)

이 이미지를 배경이미지로 무한 반복해서 구현된것입니다.

.header {

background: url(../images/main/header_bg.png) repeat-x;

....

}

비타주리 · Answer

그냥 포토샵으로 만들면 됩니다.

https://sir.kr/cm_free/1635307

이 정도를 포토샵에서 만들 수 있다면 저 정도 이미지 만드는 건 진짜 별 것 아니에요.

sinbi · Answer

해당 사이트는 CSS코드로만 구현한 게 아니라, 배경이미지 만들어 구현했네요.

대충 영어로는 wave effect 정도가 되지 않을까요?

https://codepen.io/photodow/pen/yyOLNX

경계선 또는 배경에 CSS로 물결무늬 적용하는 방법

답변 3개

공유하기