北京网页制作设计
在今天的教程中，让我们创建一个简单的列表，列出可以使用CSS 3创建的最常见的形状。我们将通过这篇文章取得进展，最后，您将学习如何创建真正伟大的东西。
如果您正在寻找SVG的介绍，请看这篇文章：如何使用SVG创建简单的形状。
查看演示→。
要在CSS中创建一个方形形状，就像圆形形状一样，我们需要一个div，并给它一个形状的ID名。因此，对于这个例子，将正方形设置为ID名称。
对于正方形的CSS，只需设置相同值的宽度和高度，并提供一个使其看起来可见的值。
#square { width: 120px; height: 120px; background: #f447ff; }就像正方形，我们会放一个简单的宽度，但这次比高度大。
#rectangle { width: 220px; height: 120px; background: #4da1f7; }椭圆形与圆形几乎相似；然而，椭圆形的形状是矩形的，需要半径为高度的一半。
#oval { width: 200px; height: 100px; background: #e9337c; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px; }为了在CSS中创建一个三角形，再次设置一个ID名为三角形的div。
<div id="triangle"></div>若要使用CSS创建倒三角形形状，请再次创建ID为tritrix_down的di北京网页制作设计v。
创建一个倒三角形，我们需要操作底部的边界属性。
#triangle_down { width: 0; height: 0; border-top: 140px solid #20a3bf; border-left: 70px solid transparent; border-right: 70px solid transparent; }创建一个面向左的三角形，操作右侧的边框属性。
#triangle_left { width: 0; height: 0; border-top: 70px solid transparent; border-right: 140px solid #6bbf20; border-bottom: 70px solid transparent; }创建一个面向左的三角形，操作左侧的边框属性。
#triangle_right { width: 0; height: 0; border-top: 70px solid transparent; border-left: 140px solid #ff5a00; border-bottom: 70px solid transparent; }若要使用CSS创建钻石形状，请提供ID名称为菱形的div。
要使用CSS创建梯形形状，请设置ID名称为梯形的div。
通过设置与平底相等的左右边框，可以显示梯形。
#trapezium { height: 0; width: 120px; border-bottom: 120px solid #ec3504; border-left: 60px solid transparent; border-right: 60px solid transparent; }若要创建平行四边形形状，请设置倾斜的转换值，使元素以30度的角度旋转。
#parallelogram { width: 160px; height: 100px; background: #8734f7; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); transform: skew(30deg); }为了使用CSS创建一个星型，需要一个带有ID星号的div。
恒星的产生是利用变换的旋转值对边界进行奇怪的处理。见下面的代码。
#star { width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star:before { height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star:after { content: ''; width: 0; height: 0; position: absolute; display: block; top: 3px; left: -105px; color: #fc2e5a; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); }使用CSS的六点星型的标记将需要一个ID名为平行四边形的div。
若要创建五角大楼，请设置一个带有五角大楼标识的div。
创建一个五角大楼需要两个元素来创建一个。首先创建一个梯形形状，然后在其上面添加一个三角形形状。
#pentagon { width: 54px; position: relative; border-width: 50px 18px 0; border-style: solid; border-color: #277bab transparent; } #pentagon:before { content: ""; height: 0; width: 0; position: absolute; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #277bab; }CSS有不同的方法来创建一个六边形。创建它的一种方法几乎与五角大楼的创建相同。首先创建一个矩形形状，北京网页制作设计然后在顶部添加两个三角形。
#hexagon { width: 100px; height: 55px; background: #fc5e5e; 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 #fc5e5e; } #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 #fc5e5e; }创建一个八角形将需要一个带有ID八角形的div。
心形可能很难完成，但可以通过从不同角度旋转元素并改变变换原点属性来改变变换元素的位置来完成。
#heart { 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%; }为了创建一个鸡蛋形状的CSS，首先创建一个ID名为E北京网页制作设计GG的div。
鸡蛋形状与椭圆形几乎相同，只是高度略高于宽度，半径被精心操纵，以获得好的效果。
#egg { width: 136px; height: 190px; background: #ffc000; display: block; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }无限大的形状可以通过仔细地操作边界和设置圆形的角度来实现。
#infinity { width: 220px; height: 100px; position: relative; } #infinity:before,#infinity:after { content: ""; width: 60px; height: 60px; position: absolute; top: 0; left: 0; border: 20px solid #06c999; -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); }为了在CSS中创建一个注释气泡形状，创建一个ID名称COMMENT_BLOUM的div。
通过制作一个矩形并给它一个边框半径，然后在左侧放置一个三角形形状，就可以创建一个泡泡注释形状。
#comment_bubble { width: 140px; height: 100px; background: #088cb7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } #comment_bubble:before { content: ""; width: 0; height: 0; right: 100%; top: 38px; position: absolute; border-top: 13px solid transparent; border-right: 26px solid #088cb7; border-bottom: 13px solid transparent; }若要在CSS中创建Pacman形状，请创建ID为Pacman的div。
创造一个吃豆人也是一个黑客。只需操作边框和半径，就可以在圆圈的左侧创建一个开口。
#pacman { width: 0; height: 0; border-right: 70px solid transparent; border-top: 70px solid #ffde00; border-left: 70px solid #ffde00; border-bottom: 70px solid #ffde00; border-top-left-radius: 70px; border-top-right-radius: 70px; border-bottom-left-radius: 70px; border-bottom-right-radius: 70px; }使用CSS形状在您的网站上放置图像有很多优点。今天，您可以使用形状作为逐步工作流程的一部分，尽管它们在北京网页制作设计不支持的浏览器中有可接受的回退选项，特别是在侏罗纪IE浏览器中。
TAG标签： 网站建设公司 SEO优化 营销推广 微信小程序 App开发 网站建设 资本 网页设计公司 品牌设计 VI设计 北京网站建设公司 注册公司 电商运营 html5 高端网站建设 人力资源公司 来源：严选企业服务
