CSS之绘制形状、透明、旋转、伸缩、transform、rotateX、rotateY、rotateZ、translateZ、transparent、skew、radial、gradient_css 透视 旋转

---

1、三角形

原理是通过设置元素的边框颜色来实现三角形效果，元素的宽高一定设置为0。
此方法在真实项目中不可行，通过图片可以看出并不是真正意义上的三角形，其中还夹杂着其他边框的值。

.triangle {
    width: 0;
    height: 0;
    border: 86px solid blue;
    /* 可以通过改变边框的颜色来控制三角形的方向 */
    border-color: blue transparent transparent transparent;
}
1
2
3
4
5
6
7

---

2、梯形

第一步
设置边框大小和颜色
第二步
分别设置边框颜色，设置底部边框为与第一步颜色一致，其余三个面设置颜色为透明色
最终达到覆盖的效果
此方法在真实项目中无法实践，通过图片可以看出并不是真正意义上的梯形，其中还夹杂着其他边框的值。

.trapezoid {
    width: 86px;
    border: 68px solid blue;
    border-color: transparent transparent blue transparent;
}
1
2
3
4
5

---

3、圆形

方法可行，可实践。

.circular{            
	width: 86px;            
	height: 86px;            
	border-radius: 50%;           
	background: blue;        
}
1
2
3
4
5
6

---

4、球体

w3school

radius-gradient()函数将径向渐变设置为背景图像。
径向渐变由其中心定义。
如需创建径向渐变，您必须定义至少两个色标。

序号	值	描述
1	shape	定义渐变的形状。 可能的值： ellipse（默认） circle
2	size	定义渐变的尺寸。 可能的值： farthest-corner（默认） closest-side closest-corner farthest-side
3	position	定义渐变的位置。默认值是 “center”。
4	start-color, …, last-color	色标是您要在其间呈现平滑过渡的颜色。该值由一个颜色值组成，其后是一个可选的停止位置（0％ 到 100％ 之间的百分比值，或沿渐变轴的长度值）。

MDN

radial-gradient()CSS函数创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成。它的形状可以是圆形或椭圆形。函数的结果是<gradient>数据类型的对象。这是一种特别的<image>。

.sphere {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: radial-gradient(circle at 43px 43px, #5cabff, #000000);
}
1
2
3
4
5
6

---

5、椭圆

.ellipse{            
	width: 200px;            
	height: 100px;            
	border-radius: 50%;            
	background: blue;        
}
1
2
3
4
5
6

---

6、半圆

.semicircle{            
	width: 50px;            
	height: 100px;           
	border-radius: 50px 0 0 50px ;            
	background: blue;        
}
1
2
3
4
5
6

---

7、菱形

w3school

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

MDN

transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
rotateZ()函数定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。它的结果是一个<transform-function>数据类型。

.diamond{
	width: 100px;
	height: 100px;
	transform: rotateZ(45deg) skew(30deg, 30deg);
	background: blue;
}
1
2
3
4
5
6

---

8、心形

.heart_shaped {
	width: 100px;
	height: 100px;
	transform: rotateZ(45deg);
	background: red;
}
		
.heart_shaped::after,
.heart_shaped::before {
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: block;
	background: red;
	position: absolute;
	top: -50%;
	left: 0;
}
		
.heart_shaped::before {
	top: 0;
	left: -50%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

---

9、五边形

.pentagon {            
	width: 100px;            
	position: relative;            
	border-width: 105px 50px 0;            
	border-style: solid;            
	border-color: blue transparent;        
}

.pentagon:before {            
	content: "";            
	position: absolute;            
	width: 0;            
	height: 0;            
	top: -185px;            
	left: -50px;            
	border-width: 0px 100px 80px;           
	border-style: solid;  
	border-color: transparent transparent blue;        
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

10、圆柱体

<div class="b_1s_red">
    <div class="cylinder">
        <div class="ellipse"></div>
        <div class="rectangle"></div>
    </div>
</div>
1
2
3
4
5
6

.cylinder {            
	position: relative;            
	transform: rotateX(70deg);        
}

.ellipse {           
	width: 100px;            
	height: 100px;             
	background: deepskyblue;           
	border-radius: 50px;        
}

.rectangle {           
	width: 100px;            
	height: 400px;            
	position: absolute;            
	opacity: 0.6;            
	background: deepskyblue;            
	top: 0;            
	left: 0;             
	border-radius: 50px;            
	z-index: -1;        
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---

11、长方体

<div class="cuboid">
	<!--前面 -->
    <div class="front"></div>
    <!--后面 -->
    <div class="back"></div>
    <!--左面 -->
    <div class="left"></div>
    <!--右面 -->
    <div class="right"></div>
    <!--上面 -->
    <div class="top"></div>
    <!--下面 -->
	<div class="bottom"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

.cuboid {
	width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
}

.cuboid div {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transition: .4s;
}

.cuboid .front {
    transform: rotateY(0deg) translateZ(100px);
    background: #a3daff;
}

.cuboid .back {
    transform: translateZ(-100px) rotateY(180deg);
    background: #a3daff;
}

.cuboid .left {
    transform: rotateY(-90deg) translateZ(100px);
    background: #1ec0ff;
}

.cuboid .right {
    transform: rotateY(90deg) translateZ(100px);
    background: #1ec0ff;
}

.cuboid .top {
    transform: rotateX(90deg) translateZ(100px);
    background: #0080ff;
}

.cuboid .bottom {
	transform: rotateX(-90deg) translateZ(100px);
	background: #0080ff;
}
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

---

12、棱锥

<div class="pyramid">
    <!--前面 -->
    <div class="front"></div>
    <!--后面 -->
    <div class="back"></div>
    <!--左面 -->
    <div class="left"></div>
    <!--右面 -->
    <div class="right"></div>
    <!--下面 -->
	<div class="bottom"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

.pyramid {
	width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
} 
.pyramid div {
    position: absolute;
    top: -100px;
    width: 0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom-width: 200px;
    opacity: 0.8;
}

.pyramid .front {
    transform: translateZ(100px) rotateX(30deg);
    border-bottom-color: #a3daff;
    transform-origin: 0 100%;
}

.pyramid .back {
    transform: translateZ(-100px) rotateX(-30deg);
    border-bottom-color: #1ec0ff;
    transform-origin: 0 100%;
}

.pyramid .left {
    transform: translateX(-100px) rotateZ(30deg) rotateY(90deg);
    border-bottom-color: #0080ff;
    transform-origin: 50% 100%;
}

.pyramid .right {
    transform: translateX(100px) rotateZ(-30deg) rotateY(90deg);
    border-bottom-color: #03a6ff;
    transform-origin: 50% 100%;
}

.pyramid .bottom {
    transform: translateX(-100px) rotateZ(90deg) rotateY(90deg);
    background: cyan;
    width: 200px;
    height: 200px;
    border: 0;
    top: 0;
    transform-origin: 50% 100%;
}
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

---

13、演示