- excel表格工作表或工作薄忘记密码2024-04-15 07:44:27
- EXCEL工作表保护密码破解2023-12-12 10:49:46
- bqt脚本启动chrome并打开某页面2023-05-17 08:48:30
- C#窗体间传递数据2022-01-26 10:01:31
- C# 实现WebSocket通信实例2022-01-20 10:22:05
18778998308服务热线
作者： 发表时间：2020-05-11 12:47:01浏览量：1913【小中大】
在前段时间看到有的面试题说让说一下梯形，当时自己懵了，所以把各种各样的常见的形状的CSS实现总结一下，基本形状实现之后就可以利用这些基本形状进行组合，就可以实现复杂的形状：
1、三角形
.triangle{
width: 0;
height: 0;
border: 50px solid blue;
//可以通过改变边框的颜色来控制三角形的方向
border-color: blue transparent transparent transparent;
}
1
2
3
4
5
6
7
2、梯形
.trapzoid{
width: 40px;
height: 100px;
border: 50px solid blue;
border-color: transparent transparent blue transparent;
}
1
2
3
4
5
6
实现的效果如图：
4、圆形
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background: blue;
}
1
2
3
4
5
6
实现的效果：
4、球体
.sphere{
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle at 70px 70px,#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、菱形
.rhombus{
width: 100px;
height: 100px;
transform: rotateZ(45deg)skew(30deg,30deg);
background: blue;
}
1
2
3
4
5
6
7
效果如下：
8、心
心是由两个圆形与一个矩形进行组合的
.heart {
width: 100px;
height: 100px;
transform: rotateZ(45deg);
background: red;
}
.heart::after,
.heart::before {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
background: red;
position: absolute;
top: -50%;
left: 0;
}
.heart::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
25
26
27
效果：
9、五边形
五边形是由三角形和梯形组成的
.pentagonal {
width: 100px;
position: relative;
border-width: 105px 50px 0;
border-style: solid;
border-color: blue transparent;
}
.pentagonal:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -185px;
left: -50px;
border-width: 0px 100px 80px;
border-style: solid; b
order-color: transparent transparent blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
效果：
10、圆柱体
由一个椭圆和一个圆角矩形进行组合
.cylinder {
position: relative; t
ransform: 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
效果：
11、长方体
由六个矩形实现
.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;
}
<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
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
50
51
52
53
54
55
56
57
58
59
60
效果：
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%;
}
<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
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
效果：
————————————————
版权声明：本文为CSDN博主「洳娅」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39897978/java/article/details/90172695
好管家网络工作室
电话：18778998308
邮箱：info@esxa.cn
地址：好管家网络工作室