안녕하세요 질문이 있어서 질문드리려고 합니다!
퍼블작업을 진행중인데 저렇게 약간 물결무늬로 파먹는 형식에 버튼을 요청하셔서 퍼블작업하려고 하는데 저부분이 도저히
해결할 아이디어를 찾지 못하여 질문드리게 되었습니다
<div class="mcinner">
<div class="main_o">
<div class="main_o_head">
<h3 class="main_o_tit">사업 및 프로그램</h3>
<div class="main_o_nav">
<a href="javascript:;" class="main_o_prev" aria-label="이전"></a>
<a href="javascript:;" class="main_o_next" aria-label="다음"></a>
</div>
</div>
<div class="main_o_swiper swiper" data-name="main_o_swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#" class="main_o_card">
<div class="main_o_card_inner">
<div class="main_o_icon" aria-hidden="true"></div>
<div class="main_o_txt">
<strong class="main_o_name"></strong>
</div>
<span class="main_o_badge">모집중</span>
</div>
<span class="main_o_go" aria-hidden="true"></span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="main_o_card">
<div class="main_o_card_inner">
<div class="main_o_icon" aria-hidden="true"></div>
<div class="main_o_txt">
<strong class="main_o_name"></strong>
</div>
<span class="main_o_badge main_o_badge_gray">대기</span>
</div>
<span class="main_o_go" aria-hidden="true"></span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="main_o_card">
<div class="main_o_card_inner">
<div class="main_o_icon" aria-hidden="true"></div>
<div class="main_o_txt">
<strong class="main_o_name"></strong>
</div>
<span class="main_o_badge main_o_badge_red">진행중</span>
</div>
<span class="main_o_go" aria-hidden="true"></span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="main_o_card">
<div class="main_o_card_inner">
<div class="main_o_icon" aria-hidden="true"></div>
<div class="main_o_txt">
<strong class="main_o_name">차</strong>
</div>
<span class="main_o_badge">모집중</span>
</div>
<span class="main_o_go" aria-hidden="true"></span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="main_o_card">
<div class="main_o_card_inner">
<div class="main_o_icon" aria-hidden="true"></div>
<div class="main_o_txt">
<strong class="main_o_name"></strong>
</div>
<span class="main_o_badge main_o_badge_blue">모집중</span>
</div>
<span class="main_o_go" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
구조는 스와이퍼를 써야해서 대충 짜두었는데 저 카드를 물결무늬로 덮을수 있을지 고민됩니다
많이 부족해서 질문하게됩니다.
항상 답변 따뜻하게 달아주셔서 감사합니다.
답변 3개 / 댓글 3개
별거아닌것같아도 css직접구현할려면 머리 박터집니다.
예를들어
사각형의 우측 하단을 곡선으로 잘라내고 싶다면, 그 모양을 SVG path로 정의해서 마스크로 씌워야 한다라는것입니다.
하여
일러스트레이터 하신분한테 만들어달라고하시는게 정신건강에 좋습니다.
답변에 대한 댓글 2개
해당 부분의 곡선 부분만 이미지로 작업 후 배경으로 하고
위치를 아래 오른쪽으로 잡으면 됩니다.
css만으로는 방법이 없을 것입니다.
이미지로 레이어로 겹처도 될 것입니다.
z-index 로 순서를 정해서 하면될 것입니다.
답변에 대한 댓글 1개
누가 내 퍼블리싱 대신 해주실 없나요??
백엔드만 하고 싶은데 ...
너무 힘드네요..
할 일은 많은데 시간은 헐러 가고 ㅜㅜ
sinbi사람손 빌리면 돈 들어갈 난이도네요..
답변을 작성하려면 로그인이 필요합니다.