CSS3 实用技巧：制作三角形

您可能感兴趣的相关文章

2012年最酷的25个 CSS3 学习教程
35个让人惊讶的 CSS3 动画效果演示
推荐12个漂亮的 CSS3 按钮实现方案
20个非常绚丽的 CSS3 特性应用演示
24款非常实用的 CSS3 工具终极收藏

/* create an arrow that points up */
div.arrow-up {
width:0px; 
height:0px; 
border-left:5px solid transparent;  /* left arrow slant */
border-right:5px solid transparent; /* right arrow slant */
border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
/* create an arrow that points down */
div.arrow-down {
width:0px; 
height:0px; 
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
/* create an arrow that points left */
div.arrow-left {
width:0px; 
height:0px; 
border-bottom:5px solid transparent;  /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-right:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
/* create an arrow that points right */
div.arrow-right {
width:0px; 
height:0px; 
border-bottom:5px solid transparent;  /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-left:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}

更多实用 CSS3 技巧：帮助你美化网站的10 实用 CSS3 技巧

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

更多专业前端知识，请上【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/365104.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！