css上 右 下 左箭头
文章描述：
html+css制作上下左右箭头
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css箭头</title>
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no"/>
<style>
.top{
width:10px;
height:10px;
position: relative;
}
.top::after{
content:'';
position: absolute;
top: 0;
left: 0;
width:10px;
height:10px;
border-top:2px solid #000;
border-left:2px solid #000;
transform:rotate(45deg);
}
.right{
width:10px;
height:10px;
position: relative;
}
.right::after{
content:'';
position: absolute;
top: 0;
left: 0;
width:10px;
height:10px;
border-top:2px solid #000;
border-right:2px solid #000;
transform:rotate(45deg);
}
.bottom{
width:10px;
height:10px;
position: relative;
}
.bottom::after{
content:'';
position: absolute;
top: 0;
left: 0;
width:10px;
height:10px;
border-bottom:2px solid #000;
border-right:2px solid #000;
transform:rotate(45deg);
}
.left{
width:10px;
height:10px;
position: relative;
}
.left::after{
content:'';
position: absolute;
top: 0;
left: 0;
width:10px;
height:10px;
border-bottom:2px solid #000;
border-left:2px solid #000;
transform:rotate(45deg);
}
</style>
</head>
<body>
<div class="top"></div>
<br/><br/>
<div class="right"></div>
<br/><br/>
<div class="bottom"></div>
<br/><br/>
<div class="left"></div>
</body>
</html>
发布时间：2023/09/01
发表评论