0579-8699-3791

义乌网站建设 APP开发 要找 ➙ 专业的义乌网络公司

知识

余杭网页制作设计在今天的教程中,让我们创建一个简单的列表,列出可以使用CSS3创建的最常见的形状。我们将通过这篇文章取得进展,最后,您将学习如何创建真正伟大的东西。如果

您当前位置>主页 > 知识 > 网站建设 >

transparent

发表时间:2020-09-15 16:47 文章来源:admin

  余杭网页制作设计

  在今天的教程中,让我们创建一个简单的列表,列出可以使用CSS 3创建的最常见的形状。我们将通过这篇文章取得进展,最后,您将学习如何创建真正伟大的东西。

  如果您正在寻找SVG的介绍,请看这篇文章:如何使用SVG创建简单的形状。

  完成本教程所需的内容

  对CSS 3的了解

  时间和耐心

  查看演示→。

  创建CSS圆

  HTML

  CSS

  #circle {

  width: 120px;

  height: 120px;

  background: #7fee1d;

  -moz-border-radius: 60px;

  -webkit-border-radius: 60px;

  border-radius: 60px;

  }

  创建CSS广场

  HTML

  要在CSS中创建一个方形形状,就像圆形形状一样,我们需要一个div,并给它一个形状的ID名。因此,对于这个例子,将正方形设置为ID名称。

  CSS

  对于正方形的CSS,只需设置相同值的宽度和高度,并提供一个使其看起来可见的值。

  #square {

  width: 120px;

  height: 120px;

  background: #f447ff;

  }

  创建CSS矩形

  HTML

  CSS

  就像正方形,我们会放一个简单的宽度,但这次比高度大。

  #rectangle {

  width: 220px;

  height: 120px;

  background: #4da1f7;

  }

  创建一个CSS椭圆

  HTML

  CSS

  椭圆形与圆形几乎相似;然而,椭圆形的形状是矩形的,需要半径为高度的一半。

  #oval {

  width: 200px;

  height: 100px;

  background: #e9337c;

  -webkit-border-radius: 100px / 50px;

  -moz-border-radius: 100px / 50px;

  border-radius: 100px / 50px;

  }

  创建CSS三角形

  HTML

  为了在CSS中创建一个三角形,再次设置一个ID名为三角形的div。

  

  CSS

  #triangle {

  width: 0;

  height: 0;

  border-bottom: 140px solid #fcf921;

  border-left: 70px solid transparent;

  border-right: 70px solid transparent;

  }

  创建CSS三角形 Down

  HTML

  若要使用CSS创建倒三角形形状,请再次创建ID为tritrix_down的di余杭网页制作设计v。

  CSS

  创建一个倒三角形,我们需要操作底部的边界属性。

  #triangle_down {

  width: 0;

  height: 0;

  border-top: 140px solid #20a3bf;

  border-left: 70px solid transparent;

  border-right: 70px solid transparent;

  }

  创建CSS三角形 Left

  parallelogram平行四边形

  HTML

  CSS

  创建一个面向左的三角形,操作右侧的边框属性。

  #triangle_left {

  width: 0;

  height: 0;

  border-top: 70px solid transparent;

  border-right: 140px solid #6bbf20;

  border-bottom: 70px solid transparent;

  }

  创建CSS三角形 Right

  HTML

  CSS

  创建一个面向左的三角形,操作左侧的边框属性。

  #triangle_right {

  width: 0;

  height: 0;

  border-top: 70px solid transparent;

  border-left: 140px solid #ff5a00;

  border-bottom: 70px solid transparent;

  }

  创建CSS钻石

  HTML

  若要使用CSS创建钻石形状,请提供ID名称为菱形的div。

  CSS

  #diamond {

  width: 120px;

  height: 120px;

  background: #1eff00;

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

  margin: 60px 0 10px 310px;

  }

  创建CSS梯形

  HTML

  要使用CSS创建梯形形状,请设置ID名称为梯形的div。

  CSS

  通过设置与平底相等的左右边框,可以显示梯形。

  #trapezium {

  height: 0;

  width: 120px;

  border-bottom: 120px solid #ec3504;

  border-left: 60px solid transparent;

  border-right: 60px solid transparent;

  }

  创建CSS平行四边形

  HTML

  CSS

  若要创建平行四边形形状,请设置倾斜的转换值,使元素以30度的角度旋转。

  #parallelogram {

  width: 160px;

  height: 100px;

  background: #8734f7;

  -webkit-transform: skew(30deg);

  -moz-transform: skew(30deg);

  -o-transform: skew(30deg);

  transform: skew(30deg);

  }

  HTML

  为了使用CSS创建一个星型,需要一个带有ID星号的div。

  CSS

  恒星的产生是利用变换的旋转值对边界进行奇怪的处理。见下面的代码。

  #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六点星

  HTML

  使用CSS的六点星型的标记将需要一个ID名为平行四边形的div。

  CSS

  #star_six_points {

  width: 0;

  height: 0;

  display: block;

  position: absolute;

  border-left: 50px solid transparent;

  border-right: 50px solid transparent;

  border-bottom: 100px solid #de34f7;

  margin: 10px auto;

  }

  #star_six_points:after {

  content: "";

  width: 0;

  height: 0;

  position: absolute;

  border-left: 50px solid transparent;

  border-right: 50px solid transparent;

  border-top: 100px solid #de34f7;

  margin: 30px 0 0 -50px;

  }

  创建一个CSS五角大楼

  HTML

  若要创建五角大楼,请设置一个带有五角大楼标识的div。

  CSS

  创建一个五角大楼需要两个元素来创建一个。首先创建一个梯形形状,然后在其上面添加一个三角形形状。

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

  }

  HTML

  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;

  }

  HTML

  创建一个八角形将需要一个带有ID八角形的div。

  CSS

  #octagon {

  width: 100px;

  height: 100px;

  background: #ac60ec;

  position: relative;

  }

  #octagon:before {

  content: "";

  width: 42px;

  height: 0;

  position: absolute;

  top: 0;

  left: 0;

  border-bottom: 29px solid #ac60ec;

  border-left: 29px solid #f4f4f4;

  border-right: 29px solid #f4f4f4;

  }

  #octagon:after {

  content: "";

  width: 42px;

  height: 0;

  position: absolute;

  bottom: 0;

  left: 0;

  border-top: 29px solid #ac60ec;

  border-left: 29px solid #f4f4f4;

  border-right: 29px solid #f4f4f4;

  }

  }

  创建CSS心脏

  HTML

  CSS

  心形可能很难完成,但可以通过从不同角度旋转元素并改变变换原点属性来改变变换元素的位置来完成。

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

  }

  HTML

  为了创建一个鸡蛋形状的CSS,首先创建一个ID名为E余杭网页制作设计GG的div。

  CSS

  鸡蛋形状与椭圆形几乎相同,只是高度略高于宽度,半径被精心操纵,以获得好的效果。

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

  }

  创建CSS无穷大符号

  HTML

  CSS

  无限大的形状可以通过仔细地操作边界和设置圆形的角度来实现。

  #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注释气泡

  HTML

  为了在CSS中创建一个注释气泡形状,创建一个ID名称COMMENT_BLOUM的div。

  CSS

  通过制作一个矩形并给它一个边框半径,然后在左侧放置一个三角形形状,就可以创建一个泡泡注释形状。

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

  }

  HTML

  若要在CSS中创建Pacman形状,请创建ID为Pacman的div。

  CSS

  创造一个吃豆人也是一个黑客。只需操作边框和半径,就可以在圆圈的左侧创建一个开口。

  #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浏览器中。

相关案例查看更多