css伪元素：：before画箭头向上箭头
.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%;
absolute relative
}
向右箭头
.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%;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。