css实现“五筒”结构_用html和css做一个八筒

一、描述

实现类似于五筒的结构，如图。

二、方法

1.定位

第一种方法使用position定位实现，子绝父相，控制子元素各方向的偏移量即可实现：

 <style>
    .container {
   
      width: 300px;
      height: 300px;
      background-color: #d1d7e6;
      font-size: 30px;
      line-height: 100px;
      text-align: center;
      /* 父元素开启相对定位 */
      position: relative;
    }

    /* 各个子元素开启绝对定位，并根据位置控制偏移量
    比如1号盒子在左上角，因此设置left和top为0
     */
    .box1 {
   
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
      left: 0;
      top: 0;
    }

    .box2 {
   
      width: 100px;
      height: 100px;
      background-color: skyblue;
      position: absolute;
      right: 0;
      top: 0;
    }

    .box3 {
   
      width: 100px;
      height: 100px;
      background-color
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