스니펫: CSS만으로 실현하는 랭키구그 배너 표기
CSS만으로 실현하는 랭킹 배너 표기
이런 느낌
캐릭터 랭킹을 만들기 위한 코드를 만들어 보았다.
html
<html>
<body>
<a class='sss'>
<img src="2399.png" width="90px" height="90px" alt="">
</a>
<a class='sss'>
<img src="" width="90px" height="90px" alt="">
</a>
<a class='sss'>
<img src="" width="90px" height="90px" alt="">
</a>
<a class='sss'>
<img src="" width="90px" height="90px" alt="">
</a>
<a class='sss'>
<img src="" width="90px" height="90px" alt="">
</a>
</body>
</html>
CSS
<style>
.sss{
counter-increment:rankingnumber;
}
.sss:before{
position: absolute;
color:#fff;
font-size:10px;
width:30px;
height:30px;
text-align:left;
border:1px solid #777;
background-color:#777;
content:counter(rankingnumber) "位";
box-shadow:10px 0 0 12px #666;
-webkit-mask-image: url(svg.svg#top);
-webkit-mask-size: cover;
}
.sss :after{
position: absolute;
content: '';
margin-left: -36px;
margin-top: -30px;
display: block;
border-radius:15px;
width: 30px;
height: 30px;
border: 1px solid #777;
mask-image: url(svg.svg#top);
mask-size: cover;
}
</style>
SVG
svg.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<style>
g {
display: none;
}
g:target {
display: inline;
}
</style>
</defs>
<g id="top">
<polygon fill="black" points="0 100 0 0 100 0"/>
</g>
<g id="bottom">
<polygon fill="black" points="100 0 100 100 0 100"/>
</g>
<g id="top-reverse">
<polygon fill="black" points="0 0 100 0 100 100"/>
</g>
<g id="bottom-reverse">
<polygon fill="black" points="0 0 0 100 100 100"/>
</g>
</svg>
Reference
이 문제에 관하여(스니펫: CSS만으로 실현하는 랭키구그 배너 표기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/KJOI/items/d219582cf11ad69543d0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
