css3激发想象/css3各种图形

http://www.cnblogs.com/wwcherish/archive/2012/09/18/2690336.html

css3激发想象/css3各种图形

#square { width: 100px; height: 100px; background: red; }

#rectangle { width: 200px; height: 100px; background: red; }

-----------------------------------------以上是我们目前css对div做的，华丽分割，激活想象---------------------------------------------------------

#circle { width: 100px; height: 100px; background: red; 　　　　　　-moz-border-radius: 50px;  /*火狐浏览器兼容*/　　　　　　-webkit-border-radius: 50px; /*用谷歌内核的兼容*/　　　　　　border-radius: 50px;  /*正常写*/} 

#oval { width: 200px; height: 100px; background: red; 　　　　　-moz-border-radius: 100px / 50px;   　　　　　-webkit-border-radius: 100px / 50px; 　　　　 border-radius: 100px / 50px; }

#triangle-up { width: 0; height: 0; 　　　　　　　　　　border-left: 50px solid transparent;　　　　　　　　　　border-right: 50px solid transparent; 　　　　　　　　　　border-bottom: 100px solid red; }

#triangle-down { width: 0; height: 0; 　　　　　　　　　　border-left: 50px solid transparent; 　　　　　　　　　　border-right: 50px solid transparent; 　　　　　　　　　　border-top: 100px solid red; } 

#triangle-left { width: 0; height: 0; 　　　　　　　　　　border-top: 50px solid transparent; 　　　　　　　　　　border-right: 100px solid red; 　　　　　　　　　　border-bottom: 50px solid transparent; }

#triangle-right { width: 0; height: 0; 　　　　　　　　　　  border-top: 50px solid transparent; 　　　　　　　　　　　border-left: 100px solid red; 　　　　　　　　　　　border-bottom: 50px solid transparent; } 

#triangle-topleft { width: 0; height: 0; 　　　　　　　　　　　　border-top: 100px solid red; 　　　　　　　　　　　　border-right: 100px solid transparent; }

#triangle-topright { width: 0; height: 0;　　　　　　　　　　　　border-top: 100px solid red; 　　　　　　　　　　　　border-left: 100px solid transparent; }

#triangle-bottomleft { width: 0; height: 0;　　　　　　　　　　　　　 border-bottom: 100px solid red; 　　　　　　　　　　　　　border-right: 100px solid transparent; } 

#triangle-bottomright { width: 0; height: 0; 　　　　　　　　　　　　　　border-bottom: 100px solid red; 　　　　　　　　　　　　　　border-left: 100px solid transparent; } 

#curvedarrow { position: relative; 　　　　　　　　width: 0; height: 0; 　　　　　　　　border-top: 9px solid transparent; border-right: 9px solid red; 　　　　　　　　-webkit-transform: rotate(10deg);<br> -moz-transform: rotate(10deg); 　　　　　　　　-ms-transform: rotate(10deg); -o-transform: rotate(10deg); }#curvedarrow:after { content: ""; position: absolute; 　　　　　　　　　　　　border: 0 solid transparent; border-top: 3px solid red; 　　　　　　　　　　　　border-radius: 20px 0 0 0; top: -12px; 　　　　　　　　　　　　left: -9px; width: 12px; height: 12px; 　　　　　　　　　　　　-webkit-transform: rotate(45deg); 　　　　　　　　　　　　-moz-transform: rotate(45deg); 　　　　　　　　　　　　-ms-transform: rotate(45deg); /*ie浏览器兼容*/　　　　　　　　　　　　-o-transform: rotate(45deg); /*opear浏览器兼容*/}

#trapezoid { border-bottom: 100px solid red; 　　　　　　　　border-left: 50px solid transparent; 　　　　　　　　border-right: 50px solid transparent; 　　　　　　　　height: 0; width: 100px; }

#parallelogram { width: 150px; height: 100px; 　　　　　　　　　　-webkit-transform: skew(20deg); 　　　　　　　　　　-moz-transform: skew(20deg); 　　　　　　　　　　-o-transform: skew(20deg); 　　　　　　　　　　background: red; }

#trapezoid { border-bottom: 100px solid red; 　　　　　　　 border-left: 50px solid transparent; 　　　　　　　 border-right: 50px solid transparent;　　　　　　　 height: 0; width: 100px; }

#star-six { width: 0; height: 0; 　　　　　　　border-left: 50px solid transparent; 　　　　　　　border-right: 50px solid transparent; border-bottom: 100px solid red;　　　　　　　position: relative; } #star-six:after { width: 0; height: 0; 　　　　　　　　　　border-left: 50px solid transparent; border-right: 50px solid transparent; 　　　　　　　　　　border-top: 100px solid red; 　　　　　　　　　　position: absolute; 　　　　　　　　　　content: ""; 　　　　　　　　　　top: 30px; left: -50px; }

#star-five { margin: 50px 0; 　　　　　　　position: relative; display: block; color: red; 　　　　　　　width: 0px; height: 0px; 　　　　　　　border-right: 100px solid transparent;border-bottom: 70px solid red; 　　　　　　　border-left: 100px solid transparent; 　　　　　　　-moz-transform: rotate(35deg); 　　　　　　　-webkit-transform: rotate(35deg);　　　　　　　-ms-transform: rotate(35deg); 　　　　　　　-o-transform: rotate(35deg); }#star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent;　　　　　　　　　　　　border-right: 30px solid transparent; 　　　　　　　　　　　　position: absolute; 　　　　　　　　　　　　height: 0; width: 0; top: -45px; left: -65px; 　　　　　　　　　　　　display: block; content: ‘‘;　　　　　　　　　　　　-webkit-transform: rotate(-35deg); 　　　　　　　　　　　　-moz-transform: rotate(-35deg); 　　　　　　　　　　　　-ms-transform: rotate(-35deg); 　　　　　　　　　　　　-o-transform: rotate(-35deg); }#star-five:after { position: absolute; display: block; color: red;　　　　　　　　　　　top: 3px; left: -105px; 　　　　　　　　　　　width: 0px; height: 0px; 　　　　　　　　　　　border-right: 100px solid transparent; border-bottom: 70px solid red; 　　　　　　　　　　　border-left: 100px solid transparent; 　　　　　　　　　　　-webkit-transform: rotate(-70deg); 　　　　　　　　　　　-moz-transform: rotate(-70deg); 　　　　　　　　　　　-ms-transform: rotate(-70deg); 　　　　　　　　　　　-o-transform: rotate(-70deg); 　　　　　　　　　　　content: ‘‘; }

#pentagon { position: relative; 　　　　　　　width: 54px; 　　　　　　　border-width: 50px 18px 0; 　　　　　　　border-style: solid; 　　　　　　　border-color: red transparent; }#pentagon:before { content: ""; position: absolute; 　　　　　　　　　　　height: 0; width: 0; 　　　　　　　　　　　top: -85px; left: -18px; 　　　　　　　　　　　border-width: 0 45px 35px; 　　　　　　　　　　　border-style: solid; 　　　　　　　　　　　border-color: transparent transparent red; } 

#hexagon { width: 100px; height: 55px; background: red; position: relative; } #hexagon:before { content: ""; position: absolute; 　　　　　　　　　　top: -25px; left: 0;　　　　　　　　　　width: 0; height: 0; 　　　　　　　　　　border-left: 50px solid transparent; 　　　　　　　　　　border-right: 50px solid transparent; 　　　　　　　　　　border-bottom: 25px solid red; }#hexagon:after { content: ""; position: absolute;　　　　　　　　　　bottom: -25px; left: 0; 　　　　　　　　　　width: 0; height: 0; 　　　　　　　　　　border-left: 50px solid transparent; border-right: 50px solid transparent; 　　　　　　　　　　border-top: 25px solid red; }

#octagon { width: 100px; height: 100px; 　　　　　　background: red; position: relative; }#octagon:before { content: ""; position: absolute; 　　　　　　　　　　 top: 0; left: 0; 　　　　　　　　　　 border-bottom: 29px solid red; border-left: 29px solid #eee; 　　　　　　　　　　 border-right: 29px solid #eee; width: 42px; height: 0; }#octagon:after { content: ""; position: absolute; 　　　　　　　　　　bottom: 0; left: 0; 　　　　　　　　　　border-top: 29px solid red; border-left: 29px solid #eee;　　　　　　　　　　border-right: 29px solid #eee; 　　　　　　　　　　width: 42px; height: 0; }

#heart { position: relative; width: 100px; height: 90px; }#heart:before, #heart:after { position: absolute; content: ""; 　　　　　　　　　　　　　　　　　 left: 50px; top: 0; 　　　　　　　　　　　　　　　　　 width: 50px; height: 80px; 　　　　　　　　　　　　　　　　　 background: red;　　　　　　　　　　　　　　　　　-moz-border-radius: 50px 50px 0 0; 　　　　　　　　　　　　　　　　　 border-radius: 50px 50px 0 0; 　　　　　　　　　　　　　　　　　-webkit-transform: rotate(-45deg); 　　　　　　　　　　　　　　　　　-moz-transform: rotate(-45deg); 　　　　　　　　　　　　　　　　　-ms-transform: rotate(-45deg); 　　　　　　　　　　　　　　　　　-o-transform: rotate(-45deg); 　　　　　　　　　　　　　　　　　transform: rotate(-45deg); 　　　　　　　　　　　　　　　　　-webkit-transform-origin: 0 100%; 　　　　　　　　　　　　　　　　　-moz-transform-origin: 0 100%; 　　　　　　　　　　　　　　　　　-ms-transform-origin: 0 100%; 　　　　　　　　　　　　　　　　　-o-transform-origin: 0 100%; 　　　　　　　　　　　　　　　　　transform-origin: 0 100%; } #heart:after { left: 0; 　　　　　　　　-webkit-transform: rotate(45deg); 　　　　　　　　-moz-transform: rotate(45deg); 　　　　　　　　-ms-transform: rotate(45deg); 　　　　　　　　-o-transform: rotate(45deg);　　　　　　　　transform: rotate(45deg); 　　　　　　　　-webkit-transform-origin: 100% 100%; 　　　　　　　　-moz-transform-origin: 100% 100%; 　　　　　　　　-ms-transform-origin: 100% 100%; 　　　　　　　　-o-transform-origin: 100% 100%; 　　　　　　　　transform-origin :100% 100%; } 

#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 { 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 { 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 { 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 { 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; } 

#egg { display:block; width: 126px; height: 180px; 　　　　background-color: red; 　　　　-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;　　　　border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }

#pacman { width: 0px; height: 0px; 　　　　　 border-right: 60px solid transparent; 　　　　　 border-top: 60px solid red; 　　　　　 border-left: 60px solid red;　　　　　 border-bottom: 60px solid red; 　　　　　 border-top-left-radius: 60px; 　　　　　 border-top-right-radius: 60px; 　　　　　 border-bottom-left-radius: 60px;　　　　　border-bottom-right-radius: 60px; }

#talkbubble { width: 120px; height: 80px; 　　　　　　　　background: red; 　　　　　　　　position: relative; 　　　　　　　　-moz-border-radius: 10px;　　　　　　　　-webkit-border-radius: 10px; 　　　　　　　　border-radius: 10px; }#talkbubble:before { content:""; position: absolute; right: 100%; top: 26px; 　　　　　　　　　　　　width: 0; height: 0; 　　　　　　　　　　　　border-top: 13px solid transparent; 　　　　　　　　　　　　border-right: 26px solid red; 　　　　　　　　　　　　border-bottom: 13px solid transparent; }

#burst-12 { background: red;　　　　　　  width: 80px; height: 80px; position: relative; 　　　　　　　text-align: center; }#burst-12:before, #burst-12:after { content: ""; position: absolute; top: 0; left: 0;　　　　　　　　　　　　　　　　　　　　  height: 80px; width: 80px; background: red; }#burst-12:before { -webkit-transform: rotate(30deg); 　　　　　　　　　　　-moz-transform: rotate(30deg); 　　　　　　　　　　　-ms-transform: rotate(30deg); 　　　　　　　　　　　-o-transform: rotate(30deg); }#burst-12:after { -webkit-transform: rotate(60deg); 　　　　　　　　　　 -moz-transform: rotate(60deg); 　　　　　　　　　　 -ms-transform: rotate(60deg); 　　　　　　　　　　　-o-transform: rotate(60deg); }

#yin-yang { width: 96px; height: 48px;　　　　　　　background: #eee; border-color: red; 　　　　　　　border-style: solid; 　　　　　　　border-width: 2px 2px 50px 2px;　　　　　　　border-radius: 100%; position: relative; } #yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; 　　　　　　　　　　　background: #eee; border: 18px solid red; 　　　　　　　　　　　border-radius: 100%; 　　　　　　　　　　　width: 12px; height: 12px; }#yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; 　　　　　　　　　　　background: red; 　　　　　　　　　　　border: 18px solid #eee; 　　　　　　　　　　　border-radius:100%;　　　　　　　　　　　width: 12px; height: 12px; } 

#badge-ribbon { position: relative; background: red; 　　　　　　　　　height: 100px; width: 100px; 　　　　　　　　　-moz-border-radius: 50px; 　　　　　　　　　-webkit-border-radius: 50px;　　　　　　　　　border-radius: 50px; } #badge-ribbon:before, #badge-ribbon:after { content: ‘‘; position: absolute; 　　　　　　　　　　　　　　　　　　　　　　　　　　border-bottom: 70px solid red; 　　　　　　　　　　　　　　　　　　　　　　　　　　border-left: 40px solid transparent;　　　　　　　　　　　　　　　　　　　　　　　　　　border-right: 40px solid transparent; 　　　　　　　　　　　　　　　　　　　　　　　　　　top: 70px; left: -10px; 　　　　　　　　　　　　　　　　　　　　　　　　　　-webkit-transform: rotate(-140deg); 　　　　　　　　　　　　　　　　　　　　　　　　　　-moz-transform: rotate(-140deg); 　　　　　　　　　　　　　　　　　　　　　　　　　　-ms-transform: rotate(-140deg); 　　　　　　　　　　　　　　　　　　　　　　　　　　-o-transform: rotate(-140deg); }#badge-ribbon:after { left: auto; right: -10px; 　　　　　　　　　　　　　-webkit-transform: rotate(140deg); 　　　　　　　　　　　　　-moz-transform: rotate(140deg); 　　　　　　　　　　　　　-ms-transform: rotate(140deg);　　　　　　　　　　　　　-o-transform: rotate(140deg); } 

#burst-8 { background: red; width: 80px; height: 80px; 　　　　　　position: relative; text-align: center; 　　　　　　-webkit-transform: rotate(20deg); 　　　　　　-moz-transform: rotate(20deg); 　　　　　　-ms-transform: rotate(20deg); 　　　　　　-o-transform: rotate(20eg); }#burst-8:before { content: ""; position: absolute; top: 0; left: 0;　　　　　　　　　　 height: 80px; width: 80px; 　　　　　　　　　　 background: red; 　　　　　　　　　　-webkit-transform: rotate(135deg);　　　　　　　　　　-moz-transform: rotate(135deg); 　　　　　　　　　　-ms-transform: rotate(135deg); 　　　　　　　　　　-o-transform: rotate(135deg); }

时间： 2024-10-21 11:51:26

css3激发想象/css3各种图形的相关文章

纯css3样式属性制作各种图形图标

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

CSS3新特性,绘制常见图形

前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必要了解下什么是伪元素(和它不同的,还有一个概念叫伪类,两者容易混淆),没有它画不成图形的. a)伪元素:用来在内容元素的前后插入额外的元素,之所以叫伪元素,就是它们根本就不在文档中生成,只能在外部可见,比如:你F12时,在右边代码框中是不是可以看到? 这里用到的两个伪元素  ①元素之前:before

【转载】CSS3实现32种基本图形

CSS3实现32种基本图形 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右直角三角形 ,八角形,十二角形.网页代码中

CSS3实现32种基本图形

CSS3实现32种基本图形      CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右直角三角形 ,八角形, 十二角形

CSS3学习（CSS3过渡、CSS3动画）

CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加过渡效果.我们仅仅使用到了一个transition属性,专门来写过渡从一个样式到另一个样式过渡时所花费的时间,以秒为单位.若时长不规定,默认为0,即没有过渡时间.在使用这个过渡效果的时候,我们使用了类似于超链接的l(link).v(visited).h(hover).a(active)样式的控制.此

CSS3基础(4)——CSS3 渲染属性

一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素计数,同时实现个性化计数. 1.CSS3计数器属性一览表 属性 描述 counter-reset 定义计算器,包括初始值.作用域等 counter-increment 设置计数器的增数 content 在::before和::after中生成内容 counter 在content属性中使用,用来调用

【CSS3绘画】CSS3制作出来的Opera浏览器Logo

<!doctype html><html><head><meta charset="utf-8"><title>[CSS3绘画] CSS3制作出来的Opera浏览器Logo</title><style type="text/css">body{ margin:50px; padding:0px;}div{ margin:0 auto; overflow:hidden;}.O{ wid

CSS3练习：css3迷宫游戏

css3迷宫游戏,在做技术的过程中,我遇到的了很多难题,曾就纠结过.这个琐碎的过程就像下面的css3小游戏.我想走到中间的绿草地,但是过程中有许多的三岔口让我选择,很是迷茫.游戏从底部中心试者向中间的路草地移动.走到中间绿草地就成功完成游戏!您从路径上掉下来,陷入泥土中,此次游戏结束!每个节点可能有1个.2个.3个不同方向的路让你选择! <!DOCTYPE HTML> <html lang=zh-cn> <head> <meta charset=utf-8>

160419、CSS3实现32种基本图形

CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右直角三角形 ,八角形, 十二角形.     网页代码中用到(<!--