重庆新华电脑学校
当前位置: 首页 > 学习园地 > 网站网络教程

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

  • 时间:2011-08-18 10:52:32
  • 来源:
  • 作者:

众所周知,盒模型(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;}

阅读次数:

 

上一篇:巧用label标签和CSS美化文件上传表单(不兼容IE6)

下一篇:腾讯、新浪为什么把CSS直接写在页面里?

 

热门专业排行榜

 

视觉新华

校园环境
 

咨询中心

  • 重庆新华电脑学校电话号码

    咨询电话

    023-68808588

在线咨询 免费电话