<div class="container">
<div class="row">
<div class="col-md-12">
<a href="#" class="pagination-item prev">
<div id="shape">
<div class="inner">
Prev
</div>
</div>
</a>
<a href="#" class="pagination-item left">
<div id="shape">
<div class="inner">
1
</div>
</div>
</a>
<a href="#" class="pagination-item left">
<div id="shape">
<div class="inner">
98
</div>
</div>
<a href="#" class="pagination-item current">
<div id="shape">
<div class="inner">
99
</div>
</div>
<a href="#" class="pagination-item right">
<div id="shape">
<div class="inner">
100
</div>
</div>
<a href="#" class="pagination-item right">
<div id="shape">
<div class="inner">
187
</div>
</div>
</a>
<a href="#" class="pagination-item next right">
<div id="shape">
<div class="inner">
next
</div>
</div>
</a>
</div>
<div class="col-md-12">
<a href="#" class="pagination-item prev">
<div id="shape">
<div class="inner">
Prev
</div>
</div>
</a>
<a href="#" class="pagination-item current ">
<div id="shape">
<div class="inner">
1
</div>
</div>
</a>
<a href="#" class="pagination-item right">
<div id="shape">
<div class="inner">
2
</div>
</div>
</a>
<a href="#" class="pagination-item right">
<div id="shape">
<div class="inner">
187
</div>
</div>
</a>
<a href="#" class="pagination-item next right">
<div id="shape">
<div class="inner">
next
</div>
</div>
</a>
</div>
<div class="col-md-12">
<a href="#" class="pagination-item prev">
<div id="shape">
<div class="inner">
Prev
</div>
</div>
</a>
<a href="#" class="pagination-item ">
<div id="shape">
<div class="inner">
1
</div>
</div>
</a>
<a href="#" class="pagination-item ">
<div id="shape">
<div class="inner">
45
</div>
</div>
</a>
<a href="#" class="pagination-item current">
<div id="shape">
<div class="inner">
46
</div>
</div>
</a>
<a href="#" class="pagination-item right">
<div id="shape">
<div class="inner">
47
</div>
</div>
</a>
<a href="#" class="pagination-item right">
<div id="shape">
<div class="inner">
187
</div>
</div>
</a>
<a href="#" class="pagination-item next right">
<div id="shape">
<div class="inner">
next
</div>
</div>
</a>
</div>
<div class="col-md-12">
<a href="#" class="pagination-item prev">
<div id="shape">
<div class="inner">
Prev
</div>
</div>
</a>
<a href="#" class="pagination-item">
<div id="shape">
<div class="inner">
1
</div>
</div>
</a>
<a href="#" class="pagination-item ">
<div id="shape">
<div class="inner">
186
</div>
</div>
</a>
<a href="#" class="pagination-item current">
<div id="shape">
<div class="inner">
187
</div>
</div>
</a>
<a href="#" class="pagination-item next right">
<div id="shape">
<div class="inner">
next
</div>
</div>
</a>
</div>
</div>
</div>
body { padding: 60px; text-align: center; }
a.pagination-item { text-decoration: none !important; color: #222 !important; margin: 0 2px; }
#shape { position: relative; margin-bottom: 6px; height: 60px; width: 50px; display: inline-block; }
.pagination-item:not(.current):not(.prev):not(.next) #shape:before { content: ''; position: absolute; top: 50%; left: 0; height: 50%; width: 100%; background: #eee; transform: skew(15deg,0); z-index: -1; s}
.pagination-item:not(.current):not(.prev):not(.next) #shape:after { content: ''; position: absolute; bottom: 50%; left: 0; height: 50%; width: 100%; background: #eee; transform: skew(-15deg, 0); z-index: -1; }
.pagination-item.prev,
.pagination-item.next { margin: 0 5px; }
.pagination-item.prev #shape,
.pagination-item.next #shape { background: #ddd; width: 90px; }
.pagination-item.prev #shape:after { content: ""; position: absolute; left: 100%; bottom: 50%; width: 0; height: 0; border-bottom: 30px solid transparent; border-left: 8px solid #ddd; }
.pagination-item.prev #shape:before { content: ""; position: absolute; left: 100%; top: 50%; width: 0; height: 0; border-top: 30px solid transparent; border-left: 8px solid #ddd; }
.pagination-item.next #shape:after { content: ""; position: absolute; right: 100%; bottom: 50%; width: 0; height: 0; border-bottom: 30px solid transparent; border-right: 8px solid #ddd; }
.pagination-item.next #shape:before { content: ""; position: absolute; right: 100%; top: 50%; width: 0; height: 0; border-top: 30px solid transparent; border-right: 8px solid #ddd; }
.pagination-item.next #shape { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }
.pagination-item.prev #shape { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }
.pagination-item.right:not(.next) #shape:after { transform: skew(15deg, 0) !important;; }
.pagination-item.right:not(.next) #shape:before { transform: skew(-15deg, 0) !important;; }
.inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pagination-item.current { margin: 0 5px; }
.pagination-item.current #shape { width: 50px; background: #ddd; position: relative; }
.pagination-item.current #shape:before { content: ""; position: absolute; right: 100%; top: 0; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right: 8px solid #ddd; }
.pagination-item.current #shape:after { content: ""; position: absolute; left: 100%; top: 0; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 8px solid #ddd; }
/*
old css
body { padding: 60px; text-align: center; }
a.pagination-item { text-decoration: none !important; color: #222 !important; }
#shape { position: relative; margin-bottom: 6px; height: 60px; width: 50px; display: inline-block; }
.pagination-item:not(.current) #shape:before { content: ''; position: absolute; top: 50%; left: 0; height: 50%; width: 100%; background: #eee; transform: skew(15deg,0); z-index: -1; s}
.pagination-item:not(.current) #shape:after { content: ''; position: absolute; bottom: 50%; left: 0; height: 50%; width: 100%; background: #eee; transform: skew(-15deg, 0); z-index: -1; }
.pagination-item.prev #shape,
.pagination-item.next #shape { width: 100px; }
.pagination-item.prev #shape:after { border-top-left-radius: 25px; }
.pagination-item.prev #shape:before { border-bottom-left-radius: 25px; }
.pagination-item.next #shape:after { border-top-right-radius: 25px; }
.pagination-item.next #shape:before { border-bottom-right-radius: 25px; }
.pagination-item.right #shape:after { transform: skew(15deg, 0) !important;; }
.pagination-item.right #shape:before { transform: skew(-15deg, 0) !important;; }
.inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pagination-item.current { margin: 0 5px; }
.pagination-item.current #shape { width: 50px; background: #eee; position: relative; }
.pagination-item.current #shape:before { content: ""; position: absolute; right: 100%; top: 0; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right: 8px solid #eee; }
.pagination-item.current #shape:after { content: ""; position: absolute; left: 100%; top: 0; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 8px solid #eee; }