纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

12/12 编程语言 阅读 581 views 次 人气 0
摘要:

图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧。

1、正方形

最终效果: 

 CSS代码如下:


复制代码
代码如下:

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

3、圆形

最终效果: 

 CSS代码如下:


复制代码
代码如下:

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

5、上三角

最终效果:

 

 

CSS代码如下:


复制代码
代码如下:

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

7、左三角

最终效果: 

 CSS代码如下:


复制代码
代码如下:

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

9、左上三角

最终效果: 

 CSS代码如下:


复制代码
代码如下:

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

11、左下三角

最终效果: 

 CSS代码如下:


复制代码
代码如下:

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

13、平行四边形

最终效果: 

 CSS代码如下:


复制代码
代码如下:

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

15、六角星

最终效果: 

 

 CSS代码如下:


复制代码
代码如下:

#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: ''; 

17、五角大楼

最终效果:

 

 CSS代码如下:


复制代码
代码如下:

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

19、八角形

最终效果: 

 CSS代码如下:


复制代码
代码如下:

#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%; 

21、无穷大符号

最终效果:

 

 

CSS代码如下:


复制代码
代码如下:

#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%; 

23、食逗人(Pac-Man)

最终效果: 

 CSS代码如下:


复制代码
代码如下:

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

25、12角星

最终效果: 

 CSS代码如下:


复制代码
代码如下:

#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); 
transform: rotate(20deg); 

#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); 
transform: rotate(135deg); 

27、钻石

最终效果: 

 CSS代码如下:


复制代码
代码如下:

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

好了,就到这里了,一共28个,个人觉得后面几个比较犀利。这些代码的来源是css-tricks。由青藤屋博客整理,转载请保留原文链接:http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html

评论

该文章不支持评论!

分享到: