이런 갤러리 스킨은 어떻게 만드나요?
본문
아래 사진처럼 갤러리 최신글의 리스트 부분의 모양을 삼각형으로 하고 싶은데요.
최신글 리스트에서 이미지가 삼각형 형태로 일부만 보이게 하려면 어느 부분에 어떻게 적용하면 될까요?
답변 1
<style>
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);
}
</style>
<ul class="wrap">
<li><img src="https://sir.kr/img/common/dow/ico2-dw06.svg" width="200" height="200" /></li>
<li><img src="https://sir.kr/img/common/dow/ico2-dw06.svg" width="200" height="200" /></li>
<li><img src="https://sir.kr/img/common/dow/ico2-dw06.svg" width="200" height="200" /></li>
<li><img src="https://sir.kr/img/common/dow/ico2-dw06.svg" width="200" height="200" /></li>
</ul>
너무 감사합니다. 한번 적용해 보겠습니다.
답변을 작성하시기 전에 로그인 해주세요.