利用纯CSS实现小三角、小梯形

来源:互联网 时间:1970-01-01

众所周知,盒模型(BoxModel)是CSS的核心,根据盒模型对块级元素设置适当的宽度和高度,然后利用盒子的边框(Border)就能够制造出形象各异的三角形甚至梯形,用小三角能实现诸如气泡提示等常见的效果,而梯形则可以间接模拟圆角矩形的实现。

下图是小三角在实际项目中的一个应用实例:

设置一个边框可见可实现传统的等腰(直角)三角形,设置两个相邻的边框可见可实现较其大一号的等腰直角三角形,如果给块级元素一个宽度和高度,就可以把小三角变成小梯形。

下边是具体实现的HTML代码:

 <!--普通等腰直角小三角-->
<div class="triangle mt15"></div>
<!--大一号的等腰直角小三角-->
<div class="triangle trapezoid mt15"></div>
<!--小梯形效果-->
<div class="triangle bigtriangle mt15"></div>
下边是相应的的CSS样式:

 .triangle {
 width:0px;
 height:0px;
 border-width:6px;
 border-color:maroon transparent transparent transparent;
 border-style:solid dashed dashed dashed;
 _line-height:0px;
 _font-size:0;
}
 
.trapezoid {
 width:10px;
 height:10px;
 border-color:maroon gray silver orange;
 border-style:solid solid solid solid;
}
 
.bigtriangle {
 border-color:maroon maroon transparent transparent;
 border-style:solid solid dashed dashed;
}
 
.mt15 {margin-top:15px;}


相关阅读:
Top