CSS3实现32种基本图形_html/css_WEB-ITnose

程序员文章站 2024-01-07 08:25:34

...

CSS3实现32种基本图形

CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。

这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形，底左直角三角形，底右直角三角形，八角形，十二角形。
网页代码中用到（

）和Div边距设置和浮动（margin: 20px 20px; float: left;）。
参考文章：编程之家：

1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。

效果图：

#Circle{ width:100px; height:100px; float: left; background: #6fee1d; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半。

效果图：

#Oval { width: 200px; height: 100px; float: left; background: #e9880c; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px; }

3.三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid。

效果图：

#Triangle { width: 0; height: 0; float: left; border-bottom: 100px solid #fcf706; border-left: 50px solid transparent; border-right: 50px solid transparent; }

4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。

效果图：

#InvertedTriangle { width: 0; height: 0; float: left; border-top: 100px solid #30a3bf; border-left: 50px solid transparent; border-right: 50px solid transparent; }

5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。

效果图：

#LeftTriangle { width: 0; height: 0; float: left; border-top: 50px solid transparent; border-right: 100px solid #466f20; border-bottom: 50px solid transparent; }

6.右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid。

效果图：

#RightTriangle { width: 0; height: 0; float: left; border-top: 50px solid transparent; border-left: 100px solid #800820; border-bottom: 50px solid transparent; }

7.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。

效果图：

#Diamond { width: 100px; height: 100px; float: left; background: #8e00ff; /* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Rotate Origin */ -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; margin: 40px 0 10px 240px; }

8.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。

效果图：

#Trapezium { height: 0; width: 100px; float: left; border-bottom: 100px solid #dc2500; border-left: 50px solid transparent; border-right: 50px solid transparent; }

9.长方形：宽比高长。

效果图：

#Rectangle { height: 50px; width: 100px; float: left; background: #afe05d; }

10.正方形：宽和高相等。

效果图：

#Square { height: 100px; width: 100px; float: left; background: #b02089; }

11.圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同。

效果图：

#Ring { width: 100px; height: 100px; float: left; background-color: white; border-radius: 80px; border:5px #ffd700 solid; }

12.平行四边形：使用transform使长方形倾斜一个角度。

效果图：

#Parallelogram { width: 120px; height: 80px; float: left; margin-left: 10px; -webkit-transform: skew(30deg); -moz-transform: skew(230deg); -o-transform: skew(30deg); transform: skew(30deg); background-color: #2eda01; }

13.五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。

效果图：

#FiveStar { width: 0; height: 0; float: left; margin: 20px 20px; color: #ff0012; position: relative; display: block; border-right: 80px solid transparent; border-bottom: 60px solid #ff0012; border-left: 80px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #FiveStar:before { height: 0; width: 0; content: ''; position: absolute; display: block; top: -35px; left: -50px; border-bottom: 60px solid #ff0012; border-left: 20px solid transparent; border-right: 20px solid transparent; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #FiveStar:after { width: 0; height: 0; content: ''; position: absolute; display: block; top: 3px; left: -85px; color: #ff0012; border-right: 80px solid transparent; border-bottom: 60px solid #ff0012; border-left: 80px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); }

14.六角星：使用transform属性来旋转不同的边。

效果图：

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

15.六边形：在长方形上面和下面各放置一个三角形。

效果图：

#Hexagon { width: 100px; height: 55px; float: left; background: #000001; position: relative; margin: 10px auto; } #Hexagon:before { content: ""; width: 0; height: 0; position: absolute; top: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #000001; } #Hexagon:after { content: ""; width: 0; height: 0; position: absolute; bottom: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #000001; }

16.五边形：可以采用三角形和梯形组合。

效果图：

#Pentagon{ width: 60px; float: left; position: relative; border-width: 52px 20px 0; border-style: solid; border-color: #711ee2 transparent; } #Pentagon:before{ content: ""; position: absolute; width: 0; height: 0; top: -92px; left: -20px; border-width: 0 50px 40px; border-style: solid; border-color: transparent transparent #711ee2; }

17.八边形：在长方形上面和下面各放置一个梯形。

效果图：

#Octagon{ width: 100px; height: 100px; float: left; margin: 10px 10px; background-color: #66e006; position: relative; } #Octagon:before{ width: 42px; height: 0; top: 0; left: 0; position: absolute; content: ""; border-left: 29px solid #ffffff; border-right: 29px solid #ffffff; border-bottom: 29px solid #66e006; } #Octagon:after{ width: 42px; height: 0; left: 0; bottom: 0; position: absolute; content: ""; border-left: 29px solid #ffffff; border-right: 29px solid #ffffff; border-top: 29px solid #66e006; }

18.心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点。

效果图：

#Heart { float: left; position: relative; } #Heart:before, #Heart:after { content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -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%; }

19.蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性。

效果图：

#Egg { width: 100px; height: 160px; float: left; background: #ffb028; display: block; -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }

20.无穷符号：通过border属性和设置伪元素的角度来实现。

效果图：

#Infinity { width: 220px; height: 100px; float: left; position: relative; } #Infinity:before, #Infinity:after { content: ""; width: 60px; height: 60px; position: absolute; top: 0; left: 0; border: 20px solid #008bb0; -moz-border-radius: 50px 50px 0; 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); }
21.消息提示框：一个圆角矩形加左边中间的一个小三角形。

效果图：

#CommentBubble { width: 140px; height: 100px; margin: 30px 20px; float: left; background: #8867b9; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } #CommentBubble:before { content: ""; width: 0; height: 0; right: 100%; top: 38px; position: absolute; border-top: 13px solid transparent; border-right: 26px solid #8867b9; border-bottom: 13px solid transparent; }
22.钻石：上面一个梯形，下面一个三角形组成。
效果图：

#Diamonds{ width: 50px; height: 0; float: left; border-style: solid; border-color: transparent transparent #9aff02 transparent; border-width: 0 25px 25px 25px; position: relative; margin: 20px 0 50px 0; } #Diamonds:after{ width: 0; height: 0; top: 25px; left: -25px; border-style: solid; border-color: #9aff02 transparent transparent transparent; border-width: 70px 50px 0 50px; position: absolute; content: ""; }
23.八卦图：多个圆形的组合。
效果图：

#EightDiagrams{ width: 96px; height: 48px; margin: 20px 20px; float: left; background-color: #ffffff; border-color: #000000; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } #EightDiagrams:before { width: 12px; height: 12px; top: 50%; left: 0; content: ""; position: absolute; background-color: #ffffff; border: 18px solid #000000; border-radius: 100%; } #EightDiagrams:after { width: 12px; height: 12px; top: 50%; left: 50%; background-color: #000000; border: 18px solid #ffffff; border-radius:100%; content: ""; position: absolute; }
24.食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性。
效果图：

#PacMan { width: 0; height: 0; float: left; border-right: 60px solid transparent; border-left: 60px solid #300fed; border-top: 60px solid #300fed; border-bottom: 60px solid #300fed; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; }
25.扇形：在三角形的基础上，让其中一边成弧形。
效果图：

#Sector { width:0; height:0; float: left; background-color: #ffffff; border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 100px solid #ab9ed1; border-radius:50%; }
26.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。
效果图：

#CrescentMoon{ width:80px; height:80px; float: left; background-color: #ffffff; border-radius:50%; box-shadow: 15px 15px 0 0 #9600d2; }
27.顶左直角三角形。
效果图：

#TopLeftTriangle { width: 0px; height: 0px; margin: 10px 10px; float: left; border-top: 100px solid #7efde1; border-right: 100px solid transparent; }
28.顶右直角三角形。
效果图：

#TopRightTriangle { width: 0px; height: 0px; margin: 10px 10px; float: left; border-top: 100px solid #400526; border-left: 100px solid transparent; }
29.底左直角三角形。
效果图：

#BottomLeftTriangle { width: 0px; height: 0px; margin: 10px 10px; float: left; border-bottom: 100px solid #600ffe; border-right: 100px solid transparent; }
30.底右直角三角形。
效果图：

#BottomRightTriangle { width: 0px; height: 0px; margin: 10px 10px; float: left; border-bottom: 100px solid #ff7578; border-left: 100px solid transparent; }
31.八角形。
效果图：

#Burst8 { width: 80px; height: 80px; margin: 10px 10px; float: left; background-color: #cf7668; position: relative; transform:rotate(20deg); -webkit-transform:rotate(20deg); -ms-transform:rotate(20deg); -moz-transform:rotate(20deg); -o-transform:rotate(20deg); } #Burst8:before{ width: 80px; height: 80px; top: 0; left: 0; background-color: #cf7668; position: absolute; content: ""; transform:rotate(135deg); -webkit-transform:rotate(135deg); -ms-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); }
32.十二角形。
效果图：

#Burst12 { width: 80px; height: 80px; margin: 20px 20px; float: left; background-color: #a8ff26; position: relative; text-align: center; } #Burst12:before, #Burst12:after{ width: 80px; height: 80px; top: 0; left: 0; background-color: #a8ff26; position: absolute; content: ""; } #Burst12:before{ transform:rotate(30deg); -webkit-transform:rotate(30deg); -ms-transform:rotate(30deg); -moz-transform:rotate(30deg); -o-transform:rotate(30deg); } #Burst12:after{ transform:rotate(60deg); -webkit-transform:rotate(60deg); -ms-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); }
完整的CSS3+HTML5代码：BaseGraphCSS3.html
效果图：

CSS3实现基本图形

多角形绘制比较复杂，比如五角星，八角形等。
心形和五角星复杂，但很常用，灵活运用可以使我们的网站更加炫酷。

以后如果遇到其他用CSS直接绘制的图形，会收集补充到这。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

html下拉菜单文字怎么变小

html5中元素能拉伸宽度吗

HTML里怎么设置thead表头的颜色

html5怎么创建跳转页尾超链接

CSS3实现32种基本图形_html/css_WE...

依赖注入与服务容器01

mvc架构模式运行原理

文件上传后端拦截03

文件上传后端拦截02

网友评论

文明上网理性发言，请遵守新闻评论服务协议
我要评论

专题推荐

 独孤九贱-php全栈开发教程
全栈 170W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

 玉女心经-web前端开发教程
入门 80W+

主讲：灭绝师太由浅入深、明快简洁，非常适合前端学习入门

 天龙八部-实战开发教程
实战 120W+

主讲：西门大官人思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

最新文章

热门排行

html中怎么清除li黑点

html下拉菜单文字怎么变小

HTML里怎么设置thead表头的颜色

html的name和value是什么意思

html如何给背景图片设置透明度

html中怎么让列表横向排列

html5怎么创建跳转页尾超链接

十分钟搞懂form标签中的GET和POST提交方式

404 not found是什么意思

DOM是什么意思

url是什么意思？

如何改变图片大小

html是什么

html如何创建电子邮件链接

HTML编辑器有哪些？最好用的4款HTML编辑器推荐

如何制作一个简单的HTML登录页面（附代码）

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

php视频教程

html视频教程

css视频教程

JS视频教程

jQuery视频教程

mysql视频教程

Linux视频教程

Python视频教程