以前需要用到箭头时,要么用的箭头图片,要么用的CSS代码生成器来做的。这次想用CSS来手写一个上下左右的箭头效果,并且如果明白里面的具体原理,可以做出更牛逼的效果。
引入:
在我们平时使用
border
时,一般都是内容宽有内容的,也就是说内容区的width
和height
不为0,然后效果一般为这样:
对应的代码:
这是内容区有内容的情况,那我们想一下,要是内容区为0,border
会是怎样呢。
结果如下:
对应代码:
HTML:
<div class="container"></div>
CSS
.container{
width: 0px;
height: 0px;
border: 60px solid;
border-color: red yellow green blue;
}
由于内容为0,所有
border
只有从两边向中间聚拢才能不破坏内容区为0 ,那么这样理所应当的形成了三角形。同时,三角形的高也就是我们为这个container
设置的border
的宽度。
那么如果我们要形成指向一个方向的三角形,我们只需要将其他三个面设置为透明就行了。
例如右箭头:
HTML
<div class="right">右</div>
CSS:
.right{
width: 0px;
height: 0px;
border: 60px solid;
border-color: transparent transparent transparent blue;
}
三角形的高就是border-width
本案例完整代码:
<!--
* @Author: CSU_XZY
* @Date: 2020-11-14 10:45:40
* @LastEditors: CSU_XZY
* @LastEditTime: 2020-11-14 11:16:23
* @FilePath: \第二天c:\Users\XZY\Desktop\前端\CSS\箭头\arrow.html
* @Description: just to play
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
width: 0px;
height: 0px;
border: 60px solid;
border-color: red yellow green blue;
}
.box{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box div{
margin: auto 20px;
}
.left{
width: 0px;
height: 0px;
border: 60px solid;
border-color: transparent yellow transparent transparent;
}
.right{
width: 0px;
height: 0px;
border: 60px solid;
border-color: transparent transparent transparent blue;
}
.top{
width: 0px;
height: 0px;
border: 60px solid;
border-color: transparent transparent green transparent;
}
.bottom{
width: 0px;
height: 0px;
border: 60px solid;
border-color: red transparent transparent transparent;
}
span{
display: none;
}
.test{
width: 100px;
height: 100px;
border:2px solid green;
margin-right: 30px;
}
</style>
<body>
<div class="test"></div>
<div class="container"></div>
<div class="box">
<span>左</span><div class="left">左</div>
<span>右</span><div class="right">右</div>
<span>上</span><div class="top">上</div>
<span>下</span><div class="bottom">下</div>
</div>
</body>
</html>
结果截图: