2026, 새로운 도약을 시작합니다.
SIR
목록으로
이전글 다음글

이런 갤러리 스킨은 어떻게 만드나요? 채택완료

동동물원
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 1,515
답변 1
목록

아래 사진처럼 갤러리 최신글의 리스트 부분의 모양을 삼각형으로 하고 싶은데요.

32151129_1666686019.7716.jpg

최신글 리스트에서 이미지가 삼각형 형태로 일부만 보이게 하려면 어느 부분에 어떻게 적용하면 될까요?

#그누보드5 #shape #갤러리최신글

답변 1개

채택된 답변
+20 포인트

2009389905_1666717209.0337.webp2009389905_1666717215.5563.webp

Copy 




ul.wrap {

    list-style-type: none;

    display: flex;

    justify-content: space-between;

}

ul.wrap li:nth-child(even) img {

    -webkit-mask-image: url(https://static.wikia.nocookie.net/lgbtqia-sandbox/images/f/f2/Pink_triangle.png/revision/latest/scale-to-width-down/200?cb=20220402114300);

    mask-image: url(https://static.wikia.nocookie.net/lgbtqia-sandbox/images/f/f2/Pink_triangle.png/revision/latest/scale-to-width-down/200?cb=20220402114300);

}

ul.wrap li:nth-child(odd) img {

    -webkit-mask-image: url(https://static.wikia.nocookie.net/lgbtqia-sandbox/images/1/14/Pink_triangle_up.png/revision/latest/scale-to-width-down/200?cb=20220402114320);

    mask-image: url(https://static.wikia.nocookie.net/lgbtqia-sandbox/images/1/14/Pink_triangle_up.png/revision/latest/scale-to-width-down/200?cb=20220402114320);

}





    

    

    

   
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

너무 감사합니다. 한번 적용해 보겠습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고