我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制基本图形（圆、椭圆等）。
您可能感兴趣的相关文章
Square
|
1
2
3
4
5
|
#square {
width: 100px;
height: 100px;
background: red;
} |
Rectangle
|
1
2
3
4
5
|
#rectangle { width: 200px;
height: 100px;
background: red;
} |
Circle
|
1
2
3
4
5
6
7
8
9
10
|
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}/* Cleaner, but slightly less support: use "50%" as value */ |
Oval
|
1
2
3
4
5
6
7
8
9
10
|
#oval { width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}/* Cleaner, but slightly less support: use "50%" as value */ |
Trapezoid
|
1
2
3
4
5
6
7
|
#trapezoid { border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
} |
Parallelogram
|
1
2
3
4
5
6
7
8
|
#parallelogram { width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
} |
Star (6-points)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#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;
} |
Star (5-points)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
#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: '';
} |
Pentagon
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#pentagon { position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}#pentagon:before { content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
} |
Hexagon
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
#hexagon { width: 100px;
height: 55px;
background: red;
position: relative;
}#hexagon:before { content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}#hexagon:after { content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
} |
Octagon
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
#octagon { width: 100px;
height: 100px;
background: red;
position: relative;
}#octagon:before { content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}#octagon:after { content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
#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%;
} |
相关推荐
总的来说，纯CSS3绘制图形和图标不仅提高了性能，还增强了设计的灵活性。通过熟练掌握以上提到的各种技巧，开发者可以创建出独特且富有创意的UI元素，提升用户体验。在提供的压缩文件"texiao2138_1560929583"中，...
"CSS3绘制各种图形图标样式特效"的主题，正是利用了CSS3的这一特性，帮助开发者实现无需依赖图片就能创建出栩栩如生的图形和图标效果。 首先，CSS3的边框属性（border-radius）是创建圆角图形的基础，通过调整边框...
在现代网页设计中，CSS3的应用越来越广泛，其中CSS3的border-radius属性是一个强大的工具，它不仅可以用来创建圆角，还可以用来生成各种形状的图形，包括半圆弧线。这篇文章的核心知识点就是如何利用CSS3的border-...
"CSS-实现椭圆环形跑道式炫酷时间轴特效效果"是一种创新且引人注目的设计技术，它将时间轴展示在一个动态的椭圆环形跑道上，为用户带来独特的交互体验。这种效果主要依赖于CSS（Cascading Style Sheets）的高级特性...
在JavaScript（JS）中，利用HTML5的...在实际应用中，还可以结合CSS3、动画和事件监听等技术，创建交互式和动态的图形效果。在项目中，这些基础知识是构建可视化界面和数据图表的基础，对于前端开发人员来说至关重要。
一、CSS3基本图形绘制 1. `border-radius`属性：通过设置边框半径，我们可以创建圆形或椭圆形的图形。例如，`border-radius: 50%`可以使一个元素变为圆形。 2. `transform`属性：使用`rotate()`、`scale()`、`skew...
微信小程序实现矩形、椭圆、直线、文字、自由绘制编辑框（仅UI），点击不同元素，显示不同的编辑框，包含颜色、线条宽度、是否填充、文字颜色、字体、加粗、斜体、删除和完成按钮等，资源包含完整微信小程序资源包，...
本文将详细介绍如何用 CSS 实现圆角、三角形、五角星、五边形、爱心、十二角星、八角星、圆形、椭圆形、圆圈以及八卦等图形，并提供具体的代码示例。 #### 二、基础几何图形 ##### 1. 长方形 ```css #Rectangle {...
本项目“JS+CSS3绘制数字科技脸元素图形特效”就是这样一个例子，它结合了JS动态生成和CSS3的高级特性，为用户提供了一种新颖且具有科技感的交互体验。下面将详细介绍这一特效的实现原理和关键知识点。 首先，我们...
这个压缩包文件“纯CSS3绘制可旋转的太极图形样式效果源码.zip”提供了一种纯CSS3实现的太极图形旋转效果，无需借助JavaScript或者其他图形库。这个例子展示了CSS3的强大功能，特别是其在动画和图形设计方面的应用。...
本资源"纯CSS3绘制各种不规则图形图标样式特效源码.zip"正是利用了CSS3的这些新特性，提供了一套不依赖于图片或JavaScript的图形绘制方案。 一、CSS3的边框与背景 在CSS3中，边框和背景的处理方式大大增强。例如，...
在CSS3中，绘制基本图形是一项非常实用的功能，它允许开发者使用纯CSS创建各种形状，如圆形、椭圆形、三角形、平行四边形、梯形、六角星以及五角星等，无需借助图像编辑软件。下面我们将详细介绍如何利用CSS3实现...
"纯css3绘制旺仔头像样式代码"的主题聚焦于利用CSS3的特性来创建一个知名的卡通人物——旺仔的头像。这个项目展示了CSS3的灵活性和创造性，使开发者无需依赖图像编辑软件就能实现复杂的图形设计。 首先，我们要理解...
6. **SVG图形**：虽然题目提到的是纯CSS3绘制，但有时结合使用内联SVG也可以实现更精细的图形绘制。 在实际操作中，我们需要按照以下步骤来绘制神奇宝贝： 1. **基础结构**：创建HTML元素作为神奇宝贝的基础形状，...
本资源“纯CSS3绘制的头像动画.rar”聚焦于利用CSS3技术来创建动态的人物头像，无需借助JavaScript或其他图像处理工具，体现了CSS3在现代Web设计中的强大潜力。 首先，我们要理解CSS3的新特性之一——绘图能力。...
- **椭圆印章**：利用`DrawEllipse()`方法，指定椭圆的中心点、宽度和高度即可绘制椭圆形状的印章。 - **圆形印章**：实际上，圆形是椭圆的一种特殊情况，只需设置相同宽度和高度即可。 - **三角形印章**：需要...
无论选择哪个库，都需要注意学习其基本概念和API，例如理解如何创建图形对象、设置属性、响应用户交互等。同时，熟练掌握CSS和HTML也是必要的，因为绘图库通常与这些技术结合使用，以实现更丰富的布局和样式控制。 ...
CSS3（层叠样式表3）是设计网页样式的标准之一，它提供了一系列强大的特性，可以让开发者创建更加丰富和动态的网页。本文将详细介绍如何使用CSS3实现元素沿着椭圆形轨迹进行旋转的示例代码。 首先，我们需要了解...