向上箭头
.pre {
position: relative;
width: 100%;
height: 20px;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.pre::before {
content: "";
width: 12px;
height: 12px;
border: solid #fff;
border-width: 2px 2px 0 0;
transform: translate(-50%, -50%) rotate(-45deg);
position: absolute;
left: 50%;
top: 70%;
}
向下箭头
.next {
position: relative;
width: 100%;
height: 20px;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.next::before {
content: "";
width: 12px;
height: 12px;
border: solid #fff;
border-width: 0 0 2x 2px;
transform: translate(-50%, -50%) rotate(-45deg);
position: absolute;
left: 50%;
top: 70%;
}
向左箭头
.pre {
position: relative;
width: 100%;
height: 20px;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.pre::before {
content: "";
width: 12px;
height: 12px;
border: solid #fff;
border-width: 2px 0 0 2px;
transform: translate(-50%, -50%) rotate(-45deg);
position: absolute;
left: 50%;
top: 70%;
}
向右箭头
.pre {
position: relative;
width: 100%;
height: 20px;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.pre::before {
content: "";
width: 12px;
height: 12px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(-45deg);
position: absolute;
left: 50%;
top: 70%;
}