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

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

QA

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

본문

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

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

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

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

답변을 작성하시기 전에 로그인 해주세요.
전체 2,087
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT