css-battle/Pokeball.html at main · kk77777/css-battle · GitHub

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
<div a>
  <div b></div>
  <div c></div>
  <div d></div>
</div>

<style>
  body {
    background: #6cb3a9;
  }
  [a] {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [b] {
    background: #f6df96;
    height: 50;
    width: 50;
    border-radius: 50%;
    border: 10px solid #781728;
    z-index: 2;
  }
  [c] {
    position: absolute;
    background: #781728;
    width: 180;
    height: 20;
    z-index: 1;
  }
  [d] {
    position: absolute;
    background: #d25b70;
    width: 200;
    height: 200;
    z-index: 0;
    border-radius: 50%;
    background: linear-gradient(
      #d25b70 45%,
      #6cb3a9 45%,
      #6cb3a9 55%,
      #ffffff 55%
    );
  }
</style>