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; }