由 code 
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">
</head>
<body>
<div class="pagination">
<a href="#" class="prev"><i class="fas fa-angle-left"></i></a>
<a href="#" class="num active">1</a>
<a href="#" class="num">2</a>
<a href="#" class="num">3</a>
<a href="#" class="num">4</a>
<a href="#" class="num">5</a>
<a href="#" class="next"><i class="fas fa-angle-right"></i></a>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
font-family: "Open Sans",sans-serif;
}
body{
background: #f1f1f1;
}
.pagination{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}
.pagination a{
margin: 6px 1px;
display: inline-block;
width: 60px;
background: #2c3e50;
height: 60px;
line-height: 60px;
color: #fff;
font-weight: 600;
transition: 0.3s;
position: relative;
padding-right: 26px;
}
.prev,.next{
padding-right: 12px !important;
font-size: 20px;
}
.pagination a:hover{
color: #e74c3c;
}
.active{
color: #e74c3c !important;
}
.prev{
border-radius: 30px 0 0 30px;
}
.next{
border-radius: 0 30px 30px 0;
}
.pagination a::before,.pagination a:after{
content: "";
position: absolute;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}
.num::before,.next::before{
border-right: 20px solid #2c3e50;
right: 100%;
}
.num:after,.prev:after{
border-right: 20px solid #f1f1f1;
right: 0;
}
获取源码: Pagination
下载数:59人次, 文件大小: 1.1 KB, 上传日期: 2020年-11 月-25日
公众号回复:gcode 获取解压密码
1,905 人查阅