在今天的教程中,让我们创建一个可以使用 CSS3 创建的最常见形状的简单列表。我们将通过文章取得进展,最后,您将学习如何创造真正伟大的东西。
本教程将让您深入了解 CSS3 形状以及如何自己创建它们。它涵盖了多种形状,可以真正加快您的网站速度,因为对图像的需求将会减少。让我们开始!
如果您正在寻找 SVG 的介绍,请查看这篇文章:如何使用 SVG 创建简单形状。
完成本教程需要什么
- CSS3的知识
- 时间和耐心
创建一个 CSS 圆圈
HTML
要在 CSS 中创建一个圆圈,首先我们需要一个 div 并给它一个形状的 ID 名称。因此,对于本示例,将 circle 设置为 ID 名称。
<div id="circle"></div>
CSS
对于 CSS,只需输入一个宽度和高度,然后给它一个宽度和高度一半的边框半径。
#circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
创建一个 CSS 正方形
HTML
要在 CSS 中创建方形,就像圆形一样,我们需要一个 div 并给它一个形状的 ID 名称。因此,对于本示例,将 square 设置为 ID 名称。
<div id="square"></div>
CSS
对于正方形的 CSS,只需设置一个相等的宽度和高度,并提供一个使其看起来可见的值。
#square {
width: 120px;
height: 120px;
background: #f447ff;
}
创建一个 CSS 矩形
HTML
要创建一个矩形 CSS 形状,就像方形形状一样,设置一个 ID 名称为 rectangle 的 div。
<div id="rectangle"></div>
CSS
就像正方形一样,我们将放置一个简单的宽度,但这次大于高度。
#rectangle {
width: 220px;
height: 120px;
background: #4da1f7;
}
创建一个 CSS 椭圆
HTML
要在 CSS 中创建一个椭圆形,请创建一个 ID 名为椭圆形的 div。
<div id="oval"></div>
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 名称为 triangle 的 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 三角形
HTML
要使用 CSS 创建倒三角形,请再次创建一个 ID 名称为 triangle_down 的 div。
<div id="triangle_down"></div>
CSS
创建一个倒三角形,我们需要操作底部的边框属性。
#triangle_down {
width: 0;
height: 0;
border-top: 140px solid #20a3bf;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
创建一个左侧的 CSS 三角形
HTML
要创建一个朝左的三角形,请再次设置一个 ID 名称为 triangle_left 的 div。
<div id="triangle_left"></div>
CSS
创建一个朝左的三角形,操纵右侧的边框属性。
#triangle_left {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-right: 140px solid #6bbf20;
border-bottom: 70px solid transparent;
}
创建一个右侧的 CSS 三角形
HTML
为了创建一个朝右的三角形,设置一个 ID 名称为 triangle_right 的 div。
<div id="triangle_right"></div>
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 名称为 diamond 的 div。
<div id="diamond"></div>
CSS
创建钻石可以通过多种方式展示。使用 transform 属性和旋转值将能够显示两个相邻的三角形。
#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 梯形
HTML
为了使用 CSS 创建一个梯形形状,请设置一个 ID 名称为 trapezium 的 div。
<div id="trapezium"></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 创建平行四边形需要一个 ID 为平行四边形的 div。
<div id="parallelogram"></div>
CSS
要创建平行四边形形状,请设置 skew 的变换值以将元素旋转 30 度角。
#parallelogram {
width: 160px;
height: 100px;
background: #8734f7;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}
创建一个 CSS 明星
HTML
为了使用 CSS 创建星形,需要一个 ID 为 star 的 div。
<div id="star"></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。
<div id="star_six_points"></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
要创建五边形,请设置一个 id 为 pentagon 的 div。
<div id="pentagon"></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;
}
创建一个 CSS 六边形
HTML
为了创建一个六边形,设置一个 ID 为 hexagon 的 div。
<div id="hexagon"></div>
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;
}
创建一个 CSS 八边形
HTML
创建一个八边形需要一个 ID 为八边形的 div。
<div id="octagon"></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,让我们首先创建一个 ID 名称为 heart 的 div。
<div id="heart"></div>
CSS
心形可能很难做到,但可以通过从不同角度旋转元素并更改 transform-origin 属性以更改转换后元素的位置来完成。
#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 鸡蛋
HTML
为了创建一个蛋形 CSS,首先创建一个 ID 名为 egg 的 div。
<div id="egg"></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 中创建一个无限大的形状,请创建一个 ID 名称为 infinity 的 div。
<div id="infinity"></div>
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_bubble 的 div。
<div id="comment_bubble"></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;
}
创建一个 CSS Pacman
HTML
要在 CSS 中创建 pacman 形状,请创建一个 ID 名称为 pacman 的 div。
<div id="pacman"></div>
CSS
创建 pacman 也是一种 hack。只需操纵边框和半径即可在圆的左侧创建一个开口。
#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 浏览器中。