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

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

QA

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

답변 3

본문

사이트 배경이나 경계선을 곡선이나 무늬로 적용하는 경우가 있는데요.

아래 예시사이트 같은 경우에는 상단 곡선은 투명배경 이미지로 적용한 것으로 보입니다.

http://www.donghwakids.co.kr/main/main.html?

메뉴바 부분의 곡선 물결무늬 같은 부분을 CSS로 구현해보려면 어떻게 하면 될까요?

또한 이런 효과를 뭐라고 검색하면 찾을 수 있을까요?

 

이 질문에 댓글 쓰기 :

답변 3

header_bg.png (65×105) (donghwakids.co.kr)

이 이미지를 배경이미지로 무한 반복해서 구현된것입니다.

.header {

background: url(../images/main/header_bg.png) repeat-x;

....

}

해당 사이트는 CSS코드로만 구현한 게 아니라, 배경이미지 만들어 구현했네요.

대충 영어로는 wave effect 정도가 되지 않을까요?

https://codepen.io/photodow/pen/yyOLNX

 

 

그냥 포토샵으로 만들면 됩니다.

https://sir.kr/cm_free/1635307

이 정도를 포토샵에서 만들 수 있다면 저 정도 이미지 만드는 건 진짜 별 것 아니에요.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #css ×
전체 2,087
© SIRSOFT
현재 페이지 제일 처음으로