乐鱼全站app下载

余杭网页制作设计:如何在CSS中创建形状

2019.01.15

921

余杭网页制作设计

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

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

完成本教程所需的内容

  • 对CSS 3的了解
  • 时间和耐心

查看演示→。

创建CSS圆

circle

HTML

CSS

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

创建CSS广场

square

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椭圆

余杭网页制作设计:如何在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三角形

diamond

HTML

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

<div id="triangle"></div>

CSS

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

创建CSS三角形 Down

trapezium

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

星-6pt

HTML

CSS

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

#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}

创建CSS钻石

pentagon

HTML

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

CSS

#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
/* 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: 60px 0 10px 310px;
}

创建CSS梯形

hexagon

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平行四边形

star

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);
}

heart

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

egg

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五角大楼

infinity

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

pacman

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

rectangle

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心脏

triangle

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

octagon

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

oblong

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

关键词

最新案例

联系电话 400-6065-301

留言
八戒体育官网app-《全网最稳》 八戒体育官网app＠首页 諾亞娛樂城