이런 갤러리 스킨은 어떻게 만드나요?
본문
답변 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>
답변을 작성하시기 전에 로그인 해주세요.