CSS3实现32种基本图形
CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。
这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形， 十二角形。 参考文章：编程之家： 1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。 效果图： 2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半。 效果图： 3.三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid。 效果图： 4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。 效果图： 5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。 效果图： 6.右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid。 效果图： 7.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。 效果图： 8.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。 效果图： 9.长方形：宽比高长。 效果图： 10.正方形：宽和高相等。 效果图： 11.圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同。 效果图： 12.平行四边形：使用transform使长方形倾斜一个角度。 效果图： 13.五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。 效果图： 14.六角星：使用transform属性来旋转不同的边。 效果图： 15.六边形：在长方形上面和下面各放置一个三角形。 效果图： 16.五边形：可以采用三角形和梯形组合。 效果图： 17.八边形：在长方形上面和下面各放置一个梯形。 效果图： 18.心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点。 效果图： 19.蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性。 效果图： 20.无穷符号：通过border属性和设置伪元素的角度来实现。 效果图： 效果图： 效果图： 效果图： 效果图： 效果图： 效果图： 效果图： 效果图： 效果图： 效果图： 效果图： 效果图： 效果图： 心形和五角星复杂，但很常用，灵活运用可以使我们的网站更加炫酷。 以后如果遇到其他用CSS直接绘制的图形，会收集补充到这。
网页代码中用到（ #Circle{ width:100px; height:100px; float: left; background: #6fee1d; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } #Oval { width: 200px; height: 100px; float: left; background: #e9880c; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px; } #Triangle { width: 0; height: 0; float: left; border-bottom: 100px solid #fcf706; border-left: 50px solid transparent; border-right: 50px solid transparent; } #InvertedTriangle { width: 0; height: 0; float: left; border-top: 100px solid #30a3bf; border-left: 50px solid transparent; border-right: 50px solid transparent; } #LeftTriangle { width: 0; height: 0; float: left; border-top: 50px solid transparent; border-right: 100px solid #466f20; border-bottom: 50px solid transparent; } #RightTriangle { width: 0; height: 0; float: left; border-top: 50px solid transparent; border-left: 100px solid #800820; border-bottom: 50px solid transparent; } #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; } #Trapezium { height: 0; width: 100px; float: left; border-bottom: 100px solid #dc2500; border-left: 50px solid transparent; border-right: 50px solid transparent; } #Rectangle { height: 50px; width: 100px; float: left; background: #afe05d; } #Square { height: 100px; width: 100px; float: left; background: #b02089; } #Ring { width: 100px; height: 100px; float: left; background-color: white; border-radius: 80px; border:5px #ffd700 solid; } #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; } #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); } #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; } #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; } #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; } #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; } #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%; } #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%; } #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
公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？Mar 04, 2025 pm 12:32 PM公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，
如何高效地在网页中为PNG图片添加描边效果？Mar 04, 2025 pm 02:39 PM本文展示了使用CSS为网页中添加有效的PNG边框。 它认为，与JavaScript或库相比，CSS提供了出色的性能，详细介绍了如何调整边界宽度，样式和颜色以获得微妙或突出的效果
如何使用HTML5表单验证属性来验证用户输入？Mar 17, 2025 pm 12:27 PM本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
＆lt; datalist＆gt;的目的是什么。 元素？Mar 21, 2025 pm 12:33 PM本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？Mar 21, 2025 pm 12:35 PM本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
＆gt; gt;的目的是什么 元素？Mar 21, 2025 pm 12:34 PM本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？Mar 12, 2025 pm 04:05 PM本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3 Linux新版
SublimeText3 Linux最新版
