今天在重构页面,师姐看到我轮播两边的箭头按钮是切图下来用的,她就让我用其他方法实现。
其实很简单,就是一个三角形重叠另一个三角形(一个设置颜色,另一个设置为背景色),然后用绝对定位露出一点点的,这样就形成了箭头了。
如图:
不说废话,赶紧贴代码!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css无敌箭头制作</title>
<style>
*{
margin:0;
padding: 0;
}
.arrowbox{
width: 30px;
height: 100px;
background-color: #ddd;
position: relative;
margin-top: 10px;
}
.arrow{
display: block;
width: 10px;
height: 10px;
}
.right,.left,.top,.bottom{
position: absolute;
top:45px;
left: 0;
}
.rightarrow1,.rightarrow2{
border-top:10px transparent dashed;
border-right: 10px transparent d