CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的
实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的一切用法，在此总结一下，以供需要的朋友们，总共30个例子
#Rectangle{
width: 200
height: 50
background-color:
text-align:
width: 200
height: 200
background-color:
text-align:
vcD4KPHA+PGltZyBzcmM9"/uploadfile/Collfiles/74.png" alt="\">
#perfect-circle{
width: 200
height: 200
background-color:
text-align:
border-radius: 100
/*-webkit-border-radius: 100*/
-moz-border-radius: 100
width: 200
height: 200
background-color:
text-align:
border-radius: 100
/*-webkit-border-radius: 10*/
/*-moz-border-radius: 100*/
width: 200
height: 100
background-color:
text-align:
border-radius: 100px/50
/*-webkit-border-radius: 100px/50*/
/*-moz-border-radius: 100px/50*/
#triangle-up{
text-align:
border-left: 50
border-right: 50
border-bottom: 100
/*-webkit-border-top-left-radius: 50*/
/*-webkit-border-top-right-radius: 50*/
/*-webkit-border-bottom-left-radius: 100*/
/*-webkit-border-bottom-right-radius: 100*/
#triangle-down{
text-align:
border-top: 100
border-left: 50
border-right: 50
#triangle-left{
text-align:
border-top: 50
border-left: 100
border-bottom: 50
#triangle-right{
text-align:
border-top: 50
border-right: 100
border-bottom: 50
#triangle-topleft{
border-top: 100
border-right: 100
#triangle-topright{
border-top: 100
border-left: 100
#triangle-bottomleft{
border-bottom: 100
border-right: 100
#triangle-bottomright{
border-bottom: 100
border-left: 100
14.平行四边形
#parallelogram{
width: 200
height: 150
margin-left: 30
-webkit-transform: skew(-30deg);
-moz-transform: skew(200deg);
-o-transform: skew(200deg);
background-color:
#trapezoid{
border-bottom: 100
border-left: 50
border-right: 50
width: 100
16. #star-five{
height: 0;
margin: 50px 0;
border-left: 100
border-right: 100
border-bottom: 70
-moz-transfrom:rotate(35deg);
-webkit-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg);
#star-five:before{
height: 0;
border-left: 30
border-right: 30
border-bottom: 80
content: "";
-moz-transform:rotate(-35deg);
-webkit-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
-o-transform:rotate(-35deg);
#star-five:after{
height: 0;
left: -105
border-left: 100
border-right: 100
border-bottom: 70
content: "";
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
17. #star-six{
height: 0;
border-left: 50
border-right: 50
border-bottom: 100
#star-six:after{
height: 0;
border-top: 100
border-left: 50
border-right: 50
content: "";
18. #pentagon{
border-width: 50px 18px 0;
border-style:
border-color:
#pentagon:before{
content: "";
height: 0;
border-width: 0 45px 35
border-style:
border-color: transpa
19. #hexagon{
width: 100
height: 55
background-color:
#hexagon:before{
content: "";
border-left: 50
border-right: 50
border-bottom: 25
#hexagon:after{
content: "";
height: 0;
bottom: -25
border-left: 50
border-right: 50
border-top: 25
20. #octagon{
width: 100
height: 100
background-color:
#octagon:before{
height: 0;
content: "";
border-left: 29px solid #
border-right: 29px solid #
border-bottom: 29
#octagon:after{
height: 0;
bottom: 0;
content: "";
border-left: 29px solid #
border-right: 29px solid #
border-top: 29
21 #heart{
width: 100
height: 90
#heart:before,#heart:after{
height: 80
background-color:
content: "";
-moz-border-radius:50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-o-transform-origin:0 100%;
tansform-origin:0 100%;
#heart:after{
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
22. #infinity{
width: 212
height: 100
#infinity:before,#infinity:after{
height: 60
border: 20
content: "";
border-radius: 50px 50px 0 50
-webkit-border-radius:50px 50px 0 50
-moz-border-radius:50px 50px 0 50
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
#infinity:after{
border-radius: 50px 50px 50px 0;
-webkit-border-radius:50px 50px 50px 0;
-moz-border-radius:50px 50px 50px 0;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
width: 126
height: 180
background-color:
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
/*-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;*/
24. #pacman{
height: 0;
border-right: 60
border-left: 60
border-top: 60
border-bottom: 60
border-top-left-radius: 60
border-top-right-radius: 60
border-bottom-left-radius: 60
border-bottom-right-radius: 60
25. #talkbubble{
width: 200
height: 100
background-color:
border-radius: 10
-webkit-border-radius:10
-moz-border-radius:10
-ms-border-radius:10
-o-border-radius:10
#talkbubble:before{
height: 0;
right: 100%;
content: "";
border-top: 15
border-right: 30
border-bottom: 15
26. #burst-12{
height: 80
background-color:
text-align:
#burst-12:before,#burst-12:after{
height: 80
background-color:
content: "";
#burst-12:before{
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
#burst-12:after{
transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-ms-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
27. #burst-8{
height: 80
background-color:
text-align:
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-ms-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
#burst-8:before{
height: 80
background-color:
content: "";
transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);
29. #diamond{
height: 0;
border-style:
border-color: transparent transpa
border-width: 0 25px 25px 25
margin: 20px 0 50px 0;
#diamond:after{
height: 0;
border-style:
border-color: red transparent tra
border-width: 70px 50px 0 50
content: "";
30. #yin-yang{
height: 48
background-color: #
border-color:
border-style:
border-width: 2px 2px 50px 2
border-radius: 100%;
#yin-yang:before {
height: 12
content: "";
background-color: #
border: 18
border-radius: 100%;
#yin-yang:after {
height: 12
left: 50%;
background-color:
border: 18px solid #
border-radius:100%;
content: "";
至此30个例子到此结束，不足之处还请大神多多指正，共同学习进步。谢谢。。。CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子
#Rectangle{
width: 200
height: 50
background-color:
text-align:
width: 200
height: 200
background-color:
text-align:
#perfect-circle{
width: 200
height: 200
background-color:
text-align:
border-radius: 100
/*-webkit-border-radius: 100*/
-moz-border-radius: 100
width: 200
height: 200
background-color:
text-align:
border-radius: 100
/*-webkit-border-radius: 10*/
/*-moz-border-radius: 100*/
width: 200
height: 100
background-color:
text-align:
border-radius: 100px/50
/*-webkit-border-radius: 100px/50*/
/*-moz-border-radius: 100px/50*/
#triangle-up{
text-align:
border-left: 50
& & border-right: 50
& & border-bottom: 100
/*-webkit-border-top-left-radius: 50*/
/*-webkit-border-top-right-radius: 50*/
/*-webkit-border-bottom-left-radius: 100*/
/*-webkit-border-bottom-right-radius: 100*/
#triangle-down{
text-align:
border-top: 100
border-left: 50
border-right: 50
#triangle-left{
text-align:
border-top: 50
border-left: 100
border-bottom: 50
#triangle-right{
text-align:
border-top: 50
border-right: 100
border-bottom: 50
#triangle-topleft{
border-top: 100
border-right: 100
#triangle-topright{
border-top: 100
border-left: 100
#triangle-bottomleft{
border-bottom: 100
border-right: 100
#triangle-bottomright{
border-bottom: 100
border-left: 100
14.平行四边形
#parallelogram{
width: 200
height: 150
margin-left: 30
-webkit-transform: skew(-30deg);
-moz-transform: skew(200deg);
-o-transform: skew(200deg);
background-color:
#trapezoid{
border-bottom: 100&
border-left: 50&
border-right: 50&
width: 100
16. #star-five{
height: 0;
margin: 50px 0;
border-left: 100
border-right: 100
border-bottom: 70
-moz-transfrom:rotate(35deg);
-webkit-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg);
#star-five:before{
height: 0;
border-left: 30
border-right: 30
border-bottom: 80
content: &&;
-moz-transform:rotate(-35deg);
-webkit-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
-o-transform:rotate(-35deg);&
#star-five:after{
height: 0;
left: -105
border-left: 100
border-right: 100
border-bottom: 70
content: &&;
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
17. #star-six{
height: 0;
border-left: 50
border-right: 50
border-bottom: 100
#star-six:after{
height: 0;
border-top: 100
border-left: 50
border-right: 50
content: &&;
18. #pentagon{
border-width: 50px 18px 0;
border-style:
border-color:
#pentagon:before{
content: &&;
height: 0;
border-width: 0 45px 35
border-style:
border-color: transpa
19. #hexagon{
width: 100
height: 55
background-color:
#hexagon:before{
content: &&;
border-left: 50
border-right: 50
border-bottom: 25
#hexagon:after{
content: &&;
height: 0;
bottom: -25
border-left: 50
border-right: 50
border-top: 25
20. #octagon{
width: 100
height: 100
background-color:
#octagon:before{
height: 0;
content: &&;
border-left: 29px solid #
border-right: 29px solid #
border-bottom: 29
#octagon:after{
height: 0;
bottom: 0;
content: &&;
border-left: 29px solid #
border-right: 29px solid #
border-top: 29
21 #heart{
width: 100
height: 90
#heart:before,#heart:after{
height: 80
background-color:
content: &&;
-moz-border-radius:50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-o-transform-origin:0 100%;
tansform-origin:0 100%;
#heart:after{
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
22. #infinity{
width: 212
height: 100
#infinity:before,#infinity:after{
height: 60
border: 20
content: &&;
border-radius: 50px 50px 0 50
-webkit-border-radius:50px 50px 0 50
-moz-border-radius:50px 50px 0 50
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
#infinity:after{
border-radius: 50px 50px 50px 0;
-webkit-border-radius:50px 50px 50px 0;
-moz-border-radius:50px 50px 50px 0;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
width: 126
height: 180
background-color:
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
/*-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;*/
24. #pacman{
height: 0;
border-right: 60
border-left: 60
border-top: 60
border-bottom: 60
border-top-left-radius: 60
border-top-right-radius: 60
border-bottom-left-radius: 60
border-bottom-right-radius: 60
25. #talkbubble{
width: 200
height: 100
background-color:
border-radius: 10
-webkit-border-radius:10
-moz-border-radius:10
-ms-border-radius:10
-o-border-radius:10
#talkbubble:before{
height: 0;
right: 100%;
content: &&;
border-top: 15
border-right: 30
border-bottom: 15
26. #burst-12{
height: 80
background-color:
text-align:
#burst-12:before,#burst-12:after{
height: 80
background-color:
content: &&;
#burst-12:before{
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
#burst-12:after{
transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-ms-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
27. #burst-8{
height: 80
background-color:
text-align:
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-ms-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
#burst-8:before{
height: 80
background-color:
content: &&;
transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);
29. #diamond{
height: 0;
border-style:
border-color: transparent transpa
border-width: 0 25px 25px 25
margin: 20px 0 50px 0;
#diamond:after{
height: 0;
border-style:
border-color: red transparent tra
border-width: 70px 50px 0 50
content: &&;
30. #yin-yang{
width: 96&
height: 48&
background-color: #&
border-color:&
border-style:&
border-width: 2px 2px 50px 2&
border-radius: 100%;&
position:&
#yin-yang:before {
width: 12&
height: 12
top: 50%;&
content: &&;&
position:&
background-color: #&
border: 18&
border-radius: 100%;&
#yin-yang:after {
width: 12&
height: 12
top: 50%;&
left: 50%;
background-color:
border: 18px solid #&
border-radius:100%;&
content: &&;&
position:&
至此30个例子到此结束，不足之处还请大神多多指正，共同学习进步。谢谢。。。
> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！
实现后的效果如下: 不带边框的 带边框的 在此提供两种实现方式: 1.不带边框的 css: *{margin:0;padding:0;} body{ background:#666; font:14px/20px &Microsoft YaHei&; text-align: } .entry{ position: relati ...
第一种方法:如果是CSS2.2的话,可以简单写一个制作圆角矩形,分上中下裁成三张图 &title&CSS3实现圆角&/title& &style type=&text/css&& #box { width:200 height:30 background:url(&../image ...
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&& &html xmlns=&http://www.w3.org/1/xht ...
在制作后台登录页的时候,需要从网页上面把那个圆角矩形框选取下来,然后通过Photoshop进行切割,在进行设置,最后得到需要的登录框的圆角矩形框.如下图.
但是登录最新的智囊团的那个登录页面的时候,上面的那个圆角矩形框已经没有了,最新的登陆页面跟QQ邮箱登录页面一样,没有了圆角矩形框.所以我就想到了用css自己堆出来一个圆角矩形框,通过查找资 ...
&!DOCTYPE html& &html& &head& &meta charset=&utf-8&& &title&&/title& &style& div{ width:300 height:300 border:1px solid re ...
CSS实现圆角的实例
实例1: 利用&strong&标签的逐渐缩小,做成圆角的效果,主要是给&strong&标签用上了font-这些属性.以下是CSS代码: #circle{
overflo ...
圆角边框可以用图片实现,也可以用CSS实现.如果用图片做的话,就画好圆角然后设置成背景图片.用CSS不需要图片,直接用代码定义颜色.用图片的话,会影响网页打开速度,当然如果图片不大,影响也并不明显.用CSS不会影响网页打开速度,但是实现方法略麻烦,要写不少代码.不好讲哪个更好哪个更差,用到各自适合的地方就行了.这里介绍两种不用图片,直接用CSS实现圆角边框的 ...
CSS制作圆角导航的另一思路 制作圆角导航其实跟制作圆角边框是一样的道理,有一种很常见的方法就是使用CSS绝对定位,切四个圆角的小图片,然后分别定位在四个角,这样就可以实现自动伸缩.但是这样的代码因为嵌套的DIV过多,而显得有些复杂,这里提供另外一种思路,即是通过CSS背景的定位去制作. 在CSS背景属性中有一项是background-position,即是 ...17406人阅读
Html(Html5 CSS3)（10）
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子
#Rectangle{
width: 200
height: 50
background-color:
text-align:
width: 200
height: 200
background-color:
text-align:
#perfect-circle{
width: 200
height: 200
background-color:
text-align:
border-radius: 100
/*-webkit-border-radius: 100*/
-moz-border-radius: 100
width: 200
height: 200
background-color:
text-align:
border-radius: 100
/*-webkit-border-radius: 10*/
/*-moz-border-radius: 100*/
width: 200
height: 100
background-color:
text-align:
border-radius: 100px/50
/*-webkit-border-radius: 100px/50*/
/*-moz-border-radius: 100px/50*/
#triangle-up{
text-align:
border-left: 50
& & border-right: 50
& & border-bottom: 100
/*-webkit-border-top-left-radius: 50*/
/*-webkit-border-top-right-radius: 50*/
/*-webkit-border-bottom-left-radius: 100*/
/*-webkit-border-bottom-right-radius: 100*/
#triangle-down{
text-align:
border-top: 100
border-left: 50
border-right: 50
#triangle-left{
text-align:
border-top: 50
border-left: 100
border-bottom: 50
#triangle-right{
text-align:
border-top: 50
border-right: 100
border-bottom: 50
#triangle-topleft{
border-top: 100
border-right: 100
#triangle-topright{
border-top: 100
border-left: 100
#triangle-bottomleft{
border-bottom: 100
border-right: 100
#triangle-bottomright{
border-bottom: 100
border-left: 100
14.平行四边形
#parallelogram{
width: 200
height: 150
margin-left: 30
-webkit-transform: skew(-30deg);
-moz-transform: skew(200deg);
-o-transform: skew(200deg);
background-color:
#trapezoid{
border-bottom: 100&
border-left: 50&
border-right: 50&
width: 100
16. #star-five{
height: 0;
margin: 50px 0;
border-left: 100
border-right: 100
border-bottom: 70
-moz-transfrom:rotate(35deg);
-webkit-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg);
#star-five:before{
height: 0;
border-left: 30
border-right: 30
border-bottom: 80
content: &&;
-moz-transform:rotate(-35deg);
-webkit-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
-o-transform:rotate(-35deg);&
#star-five:after{
height: 0;
left: -105
border-left: 100
border-right: 100
border-bottom: 70
content: &&;
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
17. #star-six{
height: 0;
border-left: 50
border-right: 50
border-bottom: 100
#star-six:after{
height: 0;
border-top: 100
border-left: 50
border-right: 50
content: &&;
18. #pentagon{
border-width: 50px 18px 0;
border-style:
border-color:
#pentagon:before{
content: &&;
height: 0;
border-width: 0 45px 35
border-style:
border-color: transpa
19. #hexagon{
width: 100
height: 55
background-color:
#hexagon:before{
content: &&;
border-left: 50
border-right: 50
border-bottom: 25
#hexagon:after{
content: &&;
height: 0;
bottom: -25
border-left: 50
border-right: 50
border-top: 25
20. #octagon{
width: 100
height: 100
background-color:
#octagon:before{
height: 0;
content: &&;
border-left: 29px solid #
border-right: 29px solid #
border-bottom: 29
#octagon:after{
height: 0;
bottom: 0;
content: &&;
border-left: 29px solid #
border-right: 29px solid #
border-top: 29
21 #heart{
width: 100
height: 90
#heart:before,#heart:after{
height: 80
background-color:
content: &&;
-moz-border-radius:50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-o-transform-origin:0 100%;
tansform-origin:0 100%;
#heart:after{
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
22. #infinity{
width: 212
height: 100
#infinity:before,#infinity:after{
height: 60
border: 20
content: &&;
border-radius: 50px 50px 0 50
-webkit-border-radius:50px 50px 0 50
-moz-border-radius:50px 50px 0 50
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
#infinity:after{
border-radius: 50px 50px 50px 0;
-webkit-border-radius:50px 50px 50px 0;
-moz-border-radius:50px 50px 50px 0;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
width: 126
height: 180
background-color:
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
/*-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;*/
24. #pacman{
height: 0;
border-right: 60
border-left: 60
border-top: 60
border-bottom: 60
border-top-left-radius: 60
border-top-right-radius: 60
border-bottom-left-radius: 60
border-bottom-right-radius: 60
25. #talkbubble{
width: 200
height: 100
background-color:
border-radius: 10
-webkit-border-radius:10
-moz-border-radius:10
-ms-border-radius:10
-o-border-radius:10
#talkbubble:before{
height: 0;
right: 100%;
content: &&;
border-top: 15
border-right: 30
border-bottom: 15
26. #burst-12{
height: 80
background-color:
text-align:
#burst-12:before,#burst-12:after{
height: 80
background-color:
content: &&;
#burst-12:before{
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
#burst-12:after{
transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-ms-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
27. #burst-8{
height: 80
background-color:
text-align:
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-ms-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
#burst-8:before{
height: 80
background-color:
content: &&;
transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);
29. #diamond{
height: 0;
border-style:
border-color: transparent transpa
border-width: 0 25px 25px 25
margin: 20px 0 50px 0;
#diamond:after{
height: 0;
border-style:
border-color: red transparent tra
border-width: 70px 50px 0 50
content: &&;
30. #yin-yang{
width: 96&
height: 48&
background-color: #&
border-color:&
border-style:&
border-width: 2px 2px 50px 2&
border-radius: 100%;&
position:&
#yin-yang:before {
width: 12&
height: 12
top: 50%;&
content: &&;&
position:&
background-color: #&
border: 18&
border-radius: 100%;&
#yin-yang:after {
width: 12&
height: 12
top: 50%;&
left: 50%;
background-color:
border: 18px solid #&
border-radius:100%;&
content: &&;&
position:&
至此30个例子到此结束，不足之处还请大神多多指正，共同学习进步。谢谢。。。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：415971次
积分：3275
积分：3275
排名：第7748名
原创：60篇
转载：10篇
评论：140条
(3)(2)(1)(1)(2)(2)(2)(1)(1)(1)(1)(1)(2)(2)(2)(2)(9)(5)(2)(6)(8)(8)(6)