css만 있으면 스티커를 SP 버전으로 디자인할 수 있습니다
스마트폰 최적화 스티커.
분노의 UI
좌우 화살표도 css만 있으면 가능합니다
<div class="pager-txt">
<span class="pager-txt-num">1ページ</span><span>(全3ページ中)</span>
</div>
<ul class="pager">
<li class="pager-all-prev"><a href=""><span class="pager-arrow-all-left"></span></a></li>
<li class="pager-prev"><a href=""><span class="pager-arrow-left">前のページ</span></a></li>
<li class="pager-next"><a href=""><span class="pager-arrow-right">次のページ</span></a></li>
<li class="pager-all-next"><a href=""><span class="pager-arrow-all-right"></span></a></li>
</ul>
.pager-txt {
margin: 40px 0 10px;
text-align: center;
color: #999;
}
.pager-txt-num {
padding-right: 5px;
}
.pager {
width: 100%;
display: flex;
margin: 10px 0 30px;
}
.pager li {
background-color: #888;
font-weight: bold;
}
.pager li a {
display: block;
padding: 12px 8px;
color: #fff;
text-align: center;
}
.pager-all-prev,.pager-all-next {
-webkit-box-flex: 2;
flex-grow: 2;
}
.pager-all-prev {
border-right: 2px solid #fff;
}
.pager-all-next {
border-left: 2px solid #fff;
}
.pager-prev,.pager-next {
-webkit-box-flex: 3;
flex-grow: 3;
}
.pager-prev {
position: relative;
}
.pager-arrow-right {
position: relative;
padding-right: 15px;
}
.pager-arrow-right::before {
content: '';
width: 10px;
height: 10px;
border: 0px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
right: 0;
margin-top: -5px;
}
.pager-arrow-left {
position: relative;
padding-left: 15px;
}
.pager-arrow-left::before {
content: '';
width: 10px;
height: 10px;
border: 0px;
border-bottom: solid 2px #fff;
border-left: solid 2px #fff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -5px;
}
.pager-prev a::after {
content: '';
width: 2px;
height: 26px;
border: 0px;
border-right: solid 2px #fff;
position: absolute;
top: 50%;
right: 0;
margin-top: -13px;
}
.pager-arrow-all-right {
position: relative;
padding-right: 5px;
}
.pager-arrow-all-right::before {
content: '';
width: 10px;
height: 10px;
border: 0px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
right: 0;
margin-top: -5px;
}
.pager-arrow-all-right::after {
content: '';
width: 2px;
height: 14px;
border-right: solid 2px #fff;
position: absolute;
top: 50%;
right: -7px;
margin-top: -7px;
}
.pager-arrow-all-left {
position: relative;
padding-left: 5px;
}
.pager-arrow-all-left::before {
content: '';
width: 10px;
height: 10px;
border: 0px;
border-bottom: solid 2px #fff;
border-left: solid 2px #fff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -5px;
}
.pager-arrow-all-left::after {
content: '';
width: 2px;
height: 14px;
border-right: solid 2px #fff;
position: absolute;
top: 50%;
left: -7px;
margin-top: -7px;
}
Reference
이 문제에 관하여(css만 있으면 스티커를 SP 버전으로 디자인할 수 있습니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/takeshi-nagaoka/items/faf17d8666b67809ae9f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)