|
使用CSS绘制各种箭头，无需裁剪图片，对浏览器支持良好，使用方便简单。 CSS绘制箭头的基本原理是通过截取border(边框)的部分“拐角”实现，几行CSS代码即可。 绘制三角形 当元素宽、高为零，且其他边为透明颜色时，可以绘制一个三角形。 <div id="test1"></div>
<style>
#test1 {
border: 10px solid transparent;
border-left-color: #f00;
width: 0;
height: 0;
}
</style>绘制任意角度的三角形 在上面例子中，通过调整不同“边框”颜色可以配置出任意角度 <div id="test2"></div>
<style>
#test2 {
border: 10px solid transparent;
border-bottom-color: #f00;
/*
border-left-color: #f00;
border-right-color: #f00;
border-top-color: #f00;
*/
width: 0;
height: 0px;
}
</style>绘制梯形 当元素宽、高和边框的宽相近或相等时，改变某一边的颜色就可以看到一个梯形； <div id="test4"></div>
<style>
#test4 {
border: 10px solid #000;
border-left-color: #f00;
width: 10px;
height: 10px;
}
</style>通过伪元素实现 三角形也可以通过伪元素绘制，而无需改变原来的DOM结构 文字内容 <span id="test3">文字内容</span>
<style>
#test3{
position: relative;
}
#test3:after {
border: 8px solid transparent;
border-left: 8px solid #f00;
width: 0;
height: 0;
position: absolute;
content: ' '
}
</style>伪元素实现三角线箭头 通过伪元素绘制出的两个，一个与背景色相同覆盖部分红色箭头，形成三角线 文字内容 <span id="test5">文字内容</span>
<style>
#test5{
position: relative;
}
#test5:after, #test5:before {
border: 6px solid transparent;
border-left: 6px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -15px;
content: ' '
}
#test5:before {
border-left-color: #f00;
right: -16px;
}
</style>使用三角线分割的Tab页
<ul id="test6">
<li>文字内容 Tab1</li>
<li>文字内容 Tab2</li>
<li>文字内容 Tab3</li>
</ul>
<style>
#test6{
font-size: 10px;
height: 24px;
}
#test6 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;
}
#test6 li:after, #test6 li:before {
border: 10px solid transparent;
border-left: 10px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -18px;
content: ' '
}
#test6 li:before {
border-left-color: #ddd;
right: -19px;
}
</style>绘制三角形和矩形组合成的提示框 这里还有另一种效果，使用三角形跟矩形组合成提示框 <div id="test7"></div>
<style>
#test7 {
width: 100px;
height: 100px;
background-color: #ccc;
position: relative;
border: 4px solid #333;
}
#test7:after, #test7:before {
border: solid transparent;
content: ' ';
height: 0;
left: 100%;
position: absolute;
width: 0;
}
#test7:after {
border-width: 9px;
border-left-color: #ccc;
top: 15px;
}
#test7:before {
border-width: 14px;
border-left-color: #333;
top: 10px;
}
</style>
文章来源 CODETC，欢迎分享，转载请注明地址：
http://www.codetc.com/article-40-1.html
|