CSS3实现32种基本图形_html/css_WEB-ITnose
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直接绘制的图形,会收集补充到这。 声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。 相关文章 相关视频 全栈 170W+ 主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门 入门 80W+ 主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门 实战 120W+ 主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
网页代码中用到( #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
专题推荐
上一篇: 编码问题_MySQL
推荐阅读
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
-
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
纯CSS3实现漂亮的价格表样式代码_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论