|
[tr][td] 网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。本文给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制数学中的各种形状的砖石等。
图片：100715xqmrzomflfr5x9lf.jpg  [*]#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); [*] [*]} 复制代码 图片：100715xqmrzomflfr5x9lf.jpg [*]#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; [*] [*]} 复制代码 图片：100715xqmrzomflfr5x9lf.jpg [*]#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; [*] [*]} 复制代码 图片：100715xqmrzomflfr5x9lf.jpg [*]#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; [*] [*]} 复制代码 图片：100715xqmrzomflfr5x9lf.jpg [*]#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; [*] [*]} 复制代码 关键词：HTML5、CSS [/td][/tr] |
|
|
沙发#
发布于：2015-07-18 12:15
厉害谢谢！
|
|
|
