CSS

语言：

CSSSCSS

确定

.pentagon {

--rotate-figure: 0deg;

perspective: 20000px;

position: relative;

transform: rotateY(var(--rotate-figure)) rotateX(30deg);

transform-style: preserve-3d;

--unit: 1.667vmin;

--square-side: calc(var(--unit) * 20);

--side-unitless: 0.61803398875;

--side: calc(var(--square-side) * var(--side-unitless));

--rotateY: 0deg;

--rotateX: 0deg;

--rotateZ: 0deg;

--fold: 0deg;

--base-distance: calc(var(--square-side) * 1.377162575778731);

width: var(--square-side);

height: var(--square-side);

--p-y2: 41.2214747707%;

--p-x3: calc(100% - 19.098300562%);

--p-x4: 19.098300562%;

--offset: .19098300562;

--shy-of-the-square: 4.89434837043;

--shy-percent: 4.89434837043%;

}

.pentagon div {

width: var(--square-side);

height: var(--square-side);

--color: hsl(var(--hue, 193), var(--saturation, 60%), var(--lightness, 60%));

background: var(--color);

color: var(--color);

--path: polygon(50% var(--shy-percent), 100% var(--p-y2), var(--p-x3) 100%, var(--p-x4) 100%, 0% var(--p-y2));

position: absolute;

top: 0;

left: 0;

opacity: .8;

transition: transform 2000ms ease-out;

transform-style: preserve-3d;

transform-origin: var(--origin-x, 50%) var(--origin-y, 100%);

transform: translate(var(--tx, 0px), var(--ty, 0px)) rotateZ(var(--rz, 0deg)) rotateY(var(--ry, 0deg)) rotateX(var(--fold, 0deg));

display: flex;

justify-content: center;

align-items: center;

}

/* separating this out so it doesn't crash Edge which has a bug when clip path appears */

@supports (clip-path: polygon(50% 0%,

100% 0%,

0% 100%)) or (-webkit-clip-path: polygon(50% 0%,

100% 0%,

0% 100%)) {

.pentagon div {

-webkit-clip-path: var(--path);

clip-path: var(--path);

}

}

.pentagon .base {

--fold: 0deg;

}

.pentagon div:nth-child(1) {

--hue: 343;

--rz: -108deg;

--origin-x: var(--p-x4);

}

.pentagon div:nth-child(2) {

--hue: 223;

--rz: -36deg;

--origin-x: var(--p-x4);

--tx: calc(var(--p-x4) * -1);

--ty: calc(var(--p-y2) - 100%);

}

.pentagon div:nth-child(3) {

--hue: 253;

--rz: 36deg;

--origin-x: var(--p-x3);

--tx: var(--p-x4);

--ty: calc(var(--p-y2) - 100%);

}

.pentagon div:nth-child(4) {

--hue: 283;

--rz: 108deg;

--origin-x: var(--p-x3);

}

.pentagon div:nth-child(5) {

--hue: 313;

--rz: 180deg;

}

.pentagon section {

border: 0px solid white;

width: var(--square-side);

height: var(--square-side);

}

.pentagon section:nth-of-type(2) {

transform-style: preserve-3d;

transform-origin: 50% 50% calc(var(--base-distance) * 0);

transform: translateY(calc(var(--square-side) * -1)) translateY(1%) translateX(calc(var(--shy-percent) * -.91)) translateZ(calc(var(--base-distance) * 1)) rotateY(180deg) rotateZ(36deg) translate3d(0, 0, 0);

--saturation: 80%;

}

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

overflow: hidden;

perspective: 2000px;

transform-style: preserve-3d;

background: linear-gradient(-135deg, hsl(213, 80%, 20%), hsl(213, 80%, 30%));

}

* {

box-sizing: border-box;

}