使用css画出箭头
勇往直前
使用css分别画出四个方向的箭头分别是上、下、左、右
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin-bottom: 30px;
}
.arrow_top {
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-bottom-color: red;
border-width: 6px;
position: relative;
}
.arrow_top:after {
position: absolute;
content: '';
display: block;
top: -5px;
margin-left: -6px;
border-color: transparent;
border-style: solid;
border-bottom-color: white;
border-width: 6px;
}
.arrow__bottom {
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-top-color: red;
border-width: 6px;
position: relative;
}
.arrow__bottom:after {
position: absolute;
content: '';
display: block;
top: -7px;
margin-left: -6px;
border-color: transparent;
border-style: solid;
border-top-color: white;
border-width: 6px;
}
.arrow__right {
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-right-color: red;
border-width: 6px;
position: relative;
margin-left: -6px;
}
.arrow__right:after {
position: absolute;
content: '';
display: block;
top: -6px;
margin-left: -5px;
border-color: transparent;
border-style: solid;
border-right-color: white;
border-width: 6px;
}
.arrow__left {
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-left-color: red;
border-width: 6px;
position: relative;
}
.arrow__left:after {
position: absolute;
content: '';
display: block;
top: -6px;
margin-left: -7px;
border-color: transparent;
border-style: solid;
border-left-color: white;
border-width: 6px;
}
</style>
</head>
<body>
<div class="arrow_top">
</div>
<div class="arrow__bottom">
</div>
<div class="arrow__right">
</div>
<div class="arrow__left">
</div>
</body>
</html>发布于 2020-05-30 14:23