//通过border(边框)的部分“拐角”实现箭头效果,比图片轻便多了
1.梯形:当元素宽、高和边框的宽相近时,改变某一边的颜色可以看到一个梯形。
<div id="demo"></div>
<style>
#demo{
width:100px;
height:100px;
border:100px solid #ccc;
border-left-color:#f60;//左边框变色
}
</style>
2.三角箭头:当元素宽、高为零,其他三边框为透明时,可以变出一个三角形。
<div id="demo"></div>
<style>
#demo{
width:0;
height:0;
border:10px solid transparent;
border-left-color:#f60; //同理任意调整单边框color、width,获得你想要的箭头效果
}
</style>
3.不改变DOM,通过伪元素实现箭头。
<div id="demo"></div>
<style>
#demo{
position:relative;
}
#demo:after{
position:absolute;
width:0;
height:0;
content:'';
border:10px solid transparent;
border-left:10px solid #f60;
}
</style>
4.伪元素实现三角箭头
<div id="demo"></div>
<style>
#demo{position:relative;}
#demo:before,#demo:after{
position:absolute;
right:0;
width:0;
height:0;
content:'';
border:10px solid transparent;
}
#demo:before{
border-left-color:#f60;
}
#demo:after{
right:1px;
border-left-color:#fff;
}
</style>
5. 三角形分割的Tab页
<ul id="demo">
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
<style>
#demo{}
#demo li{
position:relative;
float:left;
margin-right:10px;
padding-right:20px;
list-style:none;
}
#demo li:before,#demo li:after{
position:absolute;
right:0;
width:0;
height:0;
content:'';
border:10px solid transparent;
}
#demo li:before{
right:-1px;
border-left-color:#f60;
}
#demo li:after{
border-left-color:#fff;
}
</style>
6.带箭头的提示框
<div id="demo"></div>
<style>
#demo{
position:relative;
width:100px;
height:100px;
border:4px solid #ccc;
}
#demo:before,#demo:after{
position:absolute;
left:100%;
top:50%;
width:0;
height:0;
content:'';
border:solid transparent;
}
#demo:before{
margin-top:-10px;
border-width:10px;
border-left-color:#ccc;
}
#demo:after{
margin-top:-6px;
border-width:6px;
border-left-color:#fff;
}
</style>