body {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  overflow:hidden;
 background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
  background: #318CFE;
}
.drop {
  position: absolute;
  height: 200px;
  width: 200px;
  background: #54ABFB;
  border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
  opacity: 0.8;
  border: 2px solid #3d93ff;
}

.drop::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: #318CFE;
  border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
  box-shadow: -20px 30px 16px #1B6CFB, -40px 60px 32px #1b6cfb, inset -6px 6px 10px #1B6CFB, inset 2px 6px 10px #1a74e5, inset 20px -20px 22px white, inset 40px -40px 44px #a8ceff;
}

.drop::after {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  background: #E6FDFB;
  border-radius: 44% 56% 46% 54% / 36% 50% 50% 64%;
  left: 130px;
  top: 40px;
  box-shadow: 16px 40px 0 -10px white;
  opacity: 0.8;
}

.drop1 {
  left: -100px;
  top: -50px;
}

.drop2 {
  right: -100px;
  bottom: -50px;
  z-index: -1;
  border-radius: 46% 50% 39% 54% / 56% 57% 50% 50%;
}

.drop2::before {
  border-radius: 46% 50% 39% 54% / 56% 57% 50% 50%;
}

ul {
background: url(bjlogo.png) no-repeat center;
  width:90vmin;
  height:90vmin;
  position:relative;
  background-size:60%;
}

li { 
  /*
    |a|d|a|
    -------  -           
    |/   \|  | 0.5h
    |\   /|  ^          
    ------- 
    |  w  |
  
    a = 0.5h/tan60 = 0.28867513459h
    d = 0.5h/sin60 = 0.57735026919h
    w = a + d + a  = 1.15470053838h
  
    [zoom out]
  
        |a|_d_|         _____    _
        /|     \       /     \   |
  ang=60_|      \__d__/       \  | h     
       \        /     \       /  |
        \_____|/|      \_____/  _|
              a     
       |--------|
           w
  */
  --h: calc(100% / 3);
  --w: calc(1.15470053838 * var(--h));
  --a: calc(0.28867513459 * var(--h));
  --d: calc(0.57735026919 * var(--h));
  height:var(--h);
  width:var(--w);
  position:absolute;
}

img {
  display:block;
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  /* 
  
   [clip-path coordinates]
  
    --A-F--
   B|/   \|E    coord.
    |\   /|       A(a/w, 0)
    --C-D--       B(0, 50%)
                  C(a/w, 100%)
                  D(100% - a/w, 100%)
                  E(100%, 50%)
                  F(100% - a/w, 0)
                where a/w = 0.24999999999
  */
  --aw:24.99999999999%;
  -webkit-clip-path:polygon(
    var(--aw) 0,
    0 50%,
    var(--aw) 100%,
    calc(100% - var(--aw)) 100%,
    100% 50%,
    calc(100% - var(--aw)) 0
  );
          clip-path:polygon(
    var(--aw) 0,
    0 50%,
    var(--aw) 100%,
    calc(100% - var(--aw)) 100%,
    100% 50%,
    calc(100% - var(--aw)) 0
  );
}

li:nth-of-type(1) {
  left:calc(50% - var(--a) - var(--d) * 0.5);
  top:0;
}
li:nth-of-type(2) {
  left:calc(50% - var(--a) * 2 - var(--d) * 1.5);
  top:calc(var(--h) * 0.5);
}
li:nth-of-type(3) {
  left:calc(50% - var(--a) * 2 - var(--d) * 1.5);
  top:calc(var(--h) * 1.5);
}
li:nth-of-type(4) {
  left:calc(50% - var(--a) - var(--d) * 0.5);
  top:calc(var(--h) * 2);
}
li:nth-of-type(5) {
  left:calc(50% + var(--d) * 0.5);
  top:calc(var(--h) * 0.5);
}
li:nth-of-type(6) {
  left:calc(50% + var(--d) * 0.5);
  top:calc(var(--h) * 1.5);
}



/* 
style 
*/

ul {
  filter:drop-shadow(0 0 10px hsla(0,0%,0%,0.3));
}

li:hover {
  filter:drop-shadow(0 0 10px powderblue);
  z-index:10;
}

/*
anim
*/

ul {
  -webkit-animation:r 1s forwards;
          animation:r 1s forwards;
} @-webkit-keyframes r {
  from {transform:rotate(180deg)}
  to {transform:rotate(0)}
} @keyframes r {
  from {transform:rotate(180deg)}
  to {transform:rotate(0)}
}

li {
  -webkit-animation:ir 1s forwards;
          animation:ir 1s forwards;
} @-webkit-keyframes ir {
  from {transform:rotate(-360deg)}
  to {transform:rotate(0)}
} @keyframes ir {
  from {transform:rotate(-360deg)}
  to {transform:rotate(0)}
}