整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

css3制作图形大全：简单几句代码画出漂亮的图形，一起来看看吧~

年暑假实习了四个月的前端，接触了很多前端相关的东西，觉得前端真的比后端有趣多了啊，又好玩又有趣，相比后端千篇一律的代码，前端的千变万化一瞬间俘获了我的心~~~~~

下面列举一些基础的前端图形制作代码，希望对大家有用哟。

为了让大家能轻松愉快地跟着我的代码动手测试，更为了让一点计算机基础都没有的小伙伴也能跟着我下面的代码来自己动手玩耍，我先简单给出一个基础的HTML，大家可以像我这样新建一个HTML文件，然后复制下面的代码到文件中：(不知道怎么用记事本建html的小伙伴可以去看我的另外一篇文章：使用 Notepad 或 TextEdit 来编写 HTML。)

一，正方形

<html>
<body>
<h1>有趣的前端图形</h1>
<div id="square">
</div>
<style>
 #square {
 width: 100px;
 height: 100px;
 background: red;
 }
</style>
</body>
</html>

好了，现在点击使用浏览器打开上面的文件，是不是看到了下面的图像呢：

如果你已经看到了上面的图像，那么恭喜你，你可以继续往下看下去了，下面有更多有趣的图形等着你哦。

二、圆形

将下面的代码放到<style></style>中，并把<div>中的id改为circle

#circle {
 width: 100px;
 height: 100px;
 background: red;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
}

你就得到了一个可爱的圆：

当然颜色啥的，可以随便改啊~

三、椭圆

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

结果如下：

四、三角形

正三角：

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

倒三角：

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

五、五角星

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

结果：

六、六角星

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

七、无穷符号

长这样：

#infinity {
 position: relative;
 width: 212px;
 height: 100px;
}
 
#infinity:before,
#infinity:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 60px;
 height: 60px;
 border: 20px solid red;
 -moz-border-radius: 50px 50px 0 50px;
 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);
}

八、心形~~

最后来一个爱你的形状吧~~~~

心形~~~

先放最终结果：

代码：

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

更多好玩的图形，尽在hello程序媛哦~~

当然，上面的代码我也已经整理好啦，需要的童鞋可以私信我领取代码呀。

另外，不懂如何使用电脑自带的记事本编辑html的小伙伴，也可以私信问我哦，我一定知无不答答无不尽~~

tml5中是怎么实现绘制图形？

html5中可以实现绘画图形的功能，需要注意的是html5只提供2D，不提供3D绘画功能。canvas元素是H5总新增的元素，它用来专门绘制图形。你也可以把canvas元素理解成一块“画布”，我们可以在其中绘制图形。在canvas元素中绘画不是拿鼠标来绘制图形，实际上在H5完成绘画功能，不仅仅需要canvas元素，而且需要JavaScript脚本来配合才能完成绘制图形。所以说把html5中的canvas元素理解成画布是是合适不过的。

html5中的canvas元素

canvas元素必须要指定id、width（宽）、height（高）属性，虽然canvas元素是H5中用来绘制的图形，但是它的放置放和其他的元素没有区别。比如说canvas id="myCanvas" width="200" height="100"是放置了一个200*100的canvas元素。

html5中的常用的绘制图形

绘制矩形

创建canvas元素→取得上下文（使用canvas对象的getcontent方法获得上下文）→填充绘制边框→设定样式→指定线宽、颜色。代码如下图：

可以用clearRect方法擦除指定区域的图形，使矩形区域颜色变透明，context.clearRect(x,y,width,height)。

绘制圆形

绘制圆形要比矩形复杂一点，需要使用到路径，创建图形路径→关闭路径→调用绘制方法、路径。代码如下：

cxt.beginPath();是开始创建路径，有几次是循环创建路径，每次开始都需要调用beginPath()函数。

cxt.arc(70,18,15,0,Math.PI*2,true);是是创建路径，使用了arc（）方法，它的语法如下：

cxt.closePath();cxt.fill();关闭绘画路径后调用绘制路径。最后给大家一个作业，你可以试试下面的代码在浏览器执行后会是什么图形？

关于“html5中绘制图形”先聊到这。每天学习一个知识点，每日寄语”人生之苦，苦在选择，人生之难，难在放弃”如转载清标明出处。

TML和CSS中的几何图形案例

HTML代码

<div class="container"></div>
<div class="container2"></div>
<div class="container3"></div>
<div class="container4"></div>
<div class="star"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="star5"></div>
<div class="star6"></div>
<div class="center"></div>
<div class="center2"></div>
<div class="center3"></div>
<div class="center4"></div>
<div class="center5"></div>
<div class="center6"></div>

css代码

html,body,div {width:100%;height:100%;}
body {background:#2f2933;overflow:hidden;}
div {
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
 margin-right:auto;
 margin-left:auto;
 margin-top:auto;
 margin-bottom:auto;
}
.container,.center6 {
 background-color:#ffffa6;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffa6),color-stop(1, #bdf271));
 background-image: -o-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: -moz-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: -webkit-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: -ms-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: linear-gradient(to bottom, #ffffa6 0%, #bdf271 100%);
}
.container2,.center5 {
 background-color:#bdf271;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #bdf271),color-stop(1, #29d9c2));
 background-image: -o-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: -moz-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: -webkit-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: -ms-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: linear-gradient(to bottom, #bdf271 0%, #29d9c2 100%);
 -webkit-animation-delay:200ms;
 -moz-animation-delay:200ms;
 -o-animation-delay:200ms;
 animation-delay:200ms;
}
.container3,.center4 {
 background-color:#29d9c2;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #29d9c2),color-stop(1, #01a2a6));
 background-image: -o-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: -moz-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: -webkit-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: -ms-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: linear-gradient(to bottom, #29d9c2 0%, #01a2a6 100%);
 -webkit-animation-delay:400ms;
 -moz-animation-delay:400ms;
 -o-animation-delay:400ms;
 animation-delay:400ms;
}
.container4,.center {
 background-color:#f4f4f4;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f4f4f4),color-stop(1, #2f2933));
 background-image: -o-linear-gradient(bottom, #f4f4f4 0%, #2f2933 100%);
 background-image: -moz-linear-gradient(bottom, #f4f4f4 0%, #2f2933 100%);
 background-image: -webkit-linear-gradient(bottom, #f4f4f4 0%, #2f2933 100%);
 background-image: -ms-linear-gradient(bottom,#f4f4f4 0%, #2f2933 100%);
 background-image: linear-gradient(to bottom, #f4f4f4 0%, #2f2933 100%);
 -webkit-animation-delay:600ms;
 -moz-animation-delay:600ms;
 -o-animation-delay:600ms;
 animation-delay:600ms;
}
.container,.container2,.container3,.container4 {
 -webkit-animation:container 1s infinite linear;
 -moz-animation:container 1s infinite linear;
 -o-animation:container 1s infinite linear;
 animation:container 1s infinite linear;
 opacity:0.5;
}
.container{
 width:400px;
 height:400px;
 border-radius:200px;
 z-index:6;
}
.container2 {
 width:500px;
 height:500px;
 border-radius:250px;
 z-index:5;
}
.container3 {
 width:600px;
 height:600px;
 border-radius:300px;
 z-index:4;
}
.container4 {
 width:700px;
 height:700px;
 border-radius:350px;
 z-index:3;
}
.star,.star:after,.star2,.star2:after,.star3,.star3:after,.star4,.star4:after,.star5,.star5:after,.star6,.star6:after {
 width: 0;
 height: 0;
 border-left: 130px solid transparent;
 border-right: 130px solid transparent;
}
.star,.star2,.star3,.star4,.star5,.star6 {top:-5%;}
.star:after,.star2:after,.star3:after,.star4:after,.star5:after,.star6:after {
 position: absolute;
 content: "";
 top: 60px;
 left: -130px;
}
.star {border-bottom: 250px solid #ff4669;z-index:12;}
.star:after {border-top: 250px solid #ff4669;}
.star2 {
 border-bottom: 250px solid #ff86c1;
 z-index:11;
 -webkit-transform: rotate(-30deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-30deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-30deg) translateX(-15px) translateY(0px);
 transform: rotate(-30deg) translateX(-15px) translateY(0px);
}
.star2:after {border-top: 250px solid #ff86c1;}
.star3{
 border-bottom: 250px solid #ff4691;
 z-index:10;
 -webkit-transform: rotate(-35deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-35deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-35deg) translateX(-15px) translateY(0px);
 transform: rotate(-35deg) translateX(-15px) translateY(0px);
}
.star3:after {border-top: 250px solid #ff4691;}
.star4{
 border-bottom: 250px solid #ff4691;
 z-index:9;
 -webkit-transform: rotate(-40deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-40deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-40deg) translateX(-15px) translateY(0px);
 transform: rotate(-40deg) translateX(-15px) translateY(0px);
}
.star4:after {border-top: 250px solid #ff4669;}
.star5{
 border-bottom: 250px solid #ff4669;
 z-index:8;
 -webkit-transform: rotate(-45deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-45deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-45deg) translateX(-15px) translateY(0px);
 transform: rotate(-45deg) translateX(-15px) translateY(0px);
}
.star5:after {border-top: 250px solid #ff4669;}
.star6{
 border-bottom: 250px solid #ff4669;
 z-index:7;
 -webkit-transform: rotate(-50deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-50deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-50deg) translateX(-15px) translateY(0px);
 transform: rotate(-50deg) translateX(-15px) translateY(0px);
}
.star6:after {border-top: 250px solid #ff4669;}
.center,.center2,.center3,.center4,.center5,.center6 {
 -webkit-animation:container 1s infinite linear;
 -moz-animation:container 1s infinite linear;
 -o-animation:container 1s infinite linear;
 animation:container 1s infinite linear;
 opacity:0.5;
}
.center {
 width:60px;
 height:60px;
 border-radius:30px;
 z-index:13;
}
.center2 {
 width:50px;
 height:50px;
 border-radius:25px;
 background:#2f2933;
 z-index:14;
}
.center3 {
 width:40px;
 height:40px;
 border-radius:20px;
 background:#2f2933;
 z-index:15;
}
.center4 {
 width:30px;
 height:30px;
 border-radius:15px;
 z-index:16;
}
.center5 {
 width:20px;
 height:20px;
 border-radius:10px;
 z-index:17;
}
.center6 {
 width:10px;
 height:10px;
 border-radius:5px;
 z-index:18;
}
/*animation container*/
@-webkit-keyframes container {
 0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
 100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@-moz-keyframes container {
 0% {-moz-transform:rotate(0deg);transform:rotate(0deg);}
 100% {-moz-transform:rotate(360deg);transform:rotate(360deg);}
}
@-o-keyframes container {
 0% {-o-transform:rotate(0deg);transform:rotate(0deg);}
 100% {-o-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes container {
 0% {transform:rotate(0deg);}
 100% {transform:rotate(360deg);}
}

本文来源于codepad

（本文如有侵权，请联系作者，必删）


在线咨询
上一篇：什么是 HTML5?
下一篇：在企业网站建设中网页中的html是如何生成的？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 迁安市 大渡口区 铜鼓县 平乐县 河口区 桦川县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服