我们的网页因为 css 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 css3 的广泛使用，更多新奇的 css 作品涌现出来。
《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制数学中的各种形状的砖石等。
您可能感兴趣的相关文章
35个让人惊讶的 CSS3 动画效果演示 Web 前沿：一组极其绚丽的 CSS3 效果 Web 前沿：那些让人惊叹的 CSS3 应用 十款精心挑选的在线 CSS3 代码生成工具 年度盛宴：2012年最精彩的 CSS3 教程
Infinity
#infinity { position: relative; width: 212px; height: 100px;}#infinity:before,#infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}#infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
立即学习“前端免费学习笔记（深入）”；
Diamond Square
#diamond { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: red; position: relative; top: -50px;}#diamond:after { content: ''; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: red;}
立即学习“前端免费学习笔记（深入）”；
Diamond Shield
#diamond-shield { width: 0; height: 0; border: 50px solid transparent; border-bottom: 20px solid red; position: relative; top: -50px;}#diamond-shield:after { content: ''; position: absolute; left: -50px; top: 20px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid red;}
立即学习“前端免费学习笔记（深入）”；
Diamond Narrow
#diamond-narrow { width: 0; height: 0; border: 50px solid transparent; border-bottom: 70px solid red; position: relative; top: -50px;}#diamond-narrow:after { content: ''; position: absolute; left: -50px; top: 70px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid red;}
立即学习“前端免费学习笔记（深入）”；
Cut Diamond
#cut-diamond { border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 20px 0 50px 0;}#cut-diamond:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px;}
立即学习“前端免费学习笔记（深入）”；
您可能感兴趣的相关文章
CSS3 在网页设计中的20佳惊艳应用 推荐12个漂亮的 CSS3 按钮实现方案 推荐10个非常优秀的 CSS3 开发工具 分享50个漂亮的 CSS3 最佳应用示例 24款非常实用的 CSS3 工具终极收藏
本文链接：百变 CSS 系列：纯 CSS 绘制三角形（各种方向）
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
