用CSS制作箭头的方法
一、箭头产生的原理
#demo12 {
border: 100px solid;
border-color:green blue orange red;
width:100px;
height:100px;
}
<div id="demo12"></div>
第一步:设置一个div,然后给他设置样式:边框100px,上右下左颜色分别为绿、蓝、橘、红。然后设置div的高度和长度均为100px。
效果图如下:
第二步:我们可以看到中间一个正方形,就是我们设置的长和框:100px*100px。假如把width和height都设置成0的话,会有什么样的情景呢?
content拿掉后,其实就是变成一个点了,然后就变成下图了:
第三步:三角形是不是有了?而且还有四个,这时我们只需要取其中想要的任意一个方向的三角形即可。
比如我们要取绿色的三角形。看好了,一句话就出来了:
将上面的代码修改一行代码:
border-color:green transparent transparent transparent;
同理,如果你要取蓝色的、橘色的、红色的,改变第一个颜色值即可。
除了获取上面三角形以外,我们还可以获取上面每个三角形的一半,也就是一个小的三角形(left或right):
这时,我们再加一行代码即可获取:
#demo12 {
border: 100px solid;
border-color:green transparent transparent transparent;
border-left:transparent;
width:0px;
height:0px;
}
加上border-left:transparent;后,我们可以获取right的部分,结果如下:
同理,要获取left部分,可以设置border-right:transparent;
二 、箭头在实际应用中的使用和实现
㈠一个梯形
当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形:
<div id="demo11"></div>
<style>
#demo2 {
border: 10px solid #000;
border-left-color: #f00;
width: 10px;
height: 10px;
}
</style>
效果图:
㈡三角形
当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形:
<div id="demo12"></div>
<style>
#demo12 {
border: 10px solid #000;
border-left-color: #f00;
width: 0;
height: 0;
}
</style>
效果图:
㈢任意角度三角形
改变各个边的宽度,即通过调整“边框”厚度可以配置出任意角度:
<div id="demo14"></div>
<style>
#demo14 {
border: 10px solid transparent;
border-left: 20px solid #f00;
width: 0;
height: 0px;
}
</style>
效果图:
㈣三角形跟矩形组合成提示框
<div id="demo"></div>
<style>
#demo {
width: 100px;
height: 100px;
background-color: #ccc;
position: relative;
border: 4px solid #333;
}
#demo:after, #demo:before {
border: solid transparent;
content: ' ';
height: 0;
left: 100%;
position: absolute;
width: 0;
}
#demo:after {
border-width: 9px;
border-left-color: #ccc;
top: 15px;
}
#demo:before {
border-width: 14px;
border-left-color: #333;
top: 10px;
}
</style>
效果图:
㈤三角线分割的 Tab 页
<ul id="demo17">
<li> Tab1</li>
<li> Tab2</li>
<li> Tab3</li>
</ul>
<style>
#demo17{
font-size: 10px;
height: 24px;
}
#demo17 li {
float: left;
position: relative;
list-style: none;
margin: 0 20px 12px -19px;
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
padding-left: 12px;
}
#demo17 li:after, #demo17 li:before {
border: 10px solid transparent;
border-left: 10px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -18px;
content: ' '
}
#demo17 li:before {
border-left-color: #ddd;
right: -19px;
}
</style>
效果图:
㈥一个向右的箭头
我们将top、right、bottom均设置为透明色即可获得。
#demo12 {
border: 10px solid;
border-color:transparent transparent transparent orange;
width:0px;
height:0px;
}
效果图:
㈦我们从上面的四个三角形中,把bottom的三角形去掉即可,也就是把bottom的三角形设置为透明色:
#demo13 {
border: 50px solid;
border-color:orange orange transparent orange;
width:0px;
height:0px;
}
效果图:
㈧两个向右的三角形叠加而成
设置2个div,其中一个相对定位,另外一个绝对定位,这样就可以控制两个div的位置了。
然后获取2个div的右向箭头即可。talk is cheap,show me the code!
.demo14{
border: 50px solid;
border-color:transparent transparent transparent orange;
width:0px;
height:0px;
}
.demo12 {
position:relative;
float:left;
}
.demo13 {
position:absoulte;
margin-top:-52px;
}
<div class="demo demo12">
<div class="demo demo13"></div>
</div>
效果图:
参考:https://www.cnblogs.com/skyflask/p/8877713.html