纯CSS3实现的金字塔状多面体

POLYHEDRON | pyramids (CSS)

pyramid

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2220
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url('/uploads/141015/wftos.css');
html {
    background: black;
    overflow: hidden;
}
.pane {
    position: relative;
    height: 300px;
    width: 300px;
    margin-left: 180px;
    background-size: 10px;
    -webkit-perspective: 700px;
    perspective: 700px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    pointer-events: none;
    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 1px, transparent 1px, transparent), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 1px, transparent 1px, transparent);
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 1px, transparent 1px, transparent), linear-gradient(to top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 1px, transparent 1px, transparent);
}
.pane:before {
    content: '';
    z-index: 0;
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 0;
    margin-left: -1px;
    border-right: 2px solid rgba(255, 255, 255, 0.2);
}
.pane:after {
    content: '';
    z-index: 0;
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    margin-top: -1px;
    height: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.pane,
.pane *,
.pane *:before,
.pane *:after {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.pane .side {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 0;
    border-radius: 0;
    visibility: hidden;
}
.pane .side:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 86.60254px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0, 0 50%);
    clip-path: polygon(0 50%, 100% 100%, 100% 0, 0 50%);
    visibility: visible;
}
.pane .side .area {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 86.60254px;
    background-color: inherit;
    -webkit-clip-path: polygon(0% 50%, 100% 100%, 100% 0, 0% 50%, 0% 50%);
    clip-path: polygon(0% 50%, 100% 100%, 100% 0, 0% 50%, 0% 50%);
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotatey(90deg);
    -ms-transform: rotatey(90deg);
    transform: rotatey(90deg);
    visibility: visible;
}
.pane .side .area:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 100%;
    height: 0%;
    width: 0;
    background: rgba(255, 255, 255, 0.9);
    -webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0, 0 50%);
    clip-path: polygon(0 50%, 100% 100%, 100% 0, 0 50%);
    visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotatey(-54.75214deg);
    -ms-transform: rotatey(-54.75214deg);
    transform: rotatey(-54.75214deg);
}
.pane .side .joint {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    width: 0;
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}
.pane .middle {
    position: absolute;
    z-index: 1;
    height: 0;
    width: 0;
    background: black;
    border-radius: 100%;
    left: 50%;
    top: 50%;
    margin: 0;
    -webkit-animation: rotate 10s linear infinite;
    animation: rotate 10s linear infinite;
    -webkit-transform: rotatex(45deg);
    -ms-transform: rotatex(45deg);
    transform: rotatex(45deg);
}
.pane .offset {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    background: black;
    -webkit-transform: translatey(-100px) rotate(-60deg);
    -ms-transform: translatey(-100px) rotate(-60deg);
    transform: translatey(-100px) rotate(-60deg);
}
#radio0___1:checked ~ #radio1___2:checked ~ .pane .side .area {
    -webkit-clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
    clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
}
#radio0___1:checked ~ #radio1___2:checked ~ .pane .side .area:before {
    top: 25%;
    right: 50%;
    height: 50%;
    visibility: visible;
    width: 14.43376px;
}
#radio0___1:checked ~ .pane .side-3 {
    opacity: 0;
}
#radio0___1:checked ~ .pane .side-0,
#radio0___1:checked ~ .pane .side--1 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio0___1:checked ~ .pane .side-1,
#radio0___1:checked ~ .pane .side-0 .side {
    background-color: rgba(0, 255, 0, 0.9);
}
#radio0___1:checked ~ .pane .side-2,
#radio0___1:checked ~ .pane .side-1 .side {
    background-color: rgba(0, 0, 255, 0.9);
}
#radio0___1:checked ~ .pane .side-3,
#radio0___1:checked ~ .pane .side-2 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio0___1:checked ~ .pane .side:before {
    width: 28.86751px;
}
#radio0___1:checked ~ .pane .side .area {
    -webkit-transform: rotatey(79.10766deg);
    -ms-transform: rotatey(79.10766deg);
    transform: rotatey(79.10766deg);
    width: 152.75252px;
}
#radio0___1:checked ~ .pane .side .area:before {
    width: 0;
    -webkit-transform: rotatey(-79.10766deg);
    -ms-transform: rotatey(-79.10766deg);
    transform: rotatey(-79.10766deg);
}
#radio0___1:checked ~ .pane .joint {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
#radio0___1:checked ~ .pane .offset {
    -webkit-transform: translatey(-57.73503px) rotate(-30deg);
    -ms-transform: translatey(-57.73503px) rotate(-30deg);
    transform: translatey(-57.73503px) rotate(-30deg);
}
#radio1___1:checked ~ #radio1___2:checked ~ .pane .side .area {
    -webkit-clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
    clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
}
#radio1___1:checked ~ #radio1___2:checked ~ .pane .side .area:before {
    top: 25%;
    right: 50%;
    height: 50%;
    visibility: visible;
    width: 25px;
}
#radio1___1:checked ~ .pane .side-4 {
    opacity: 0;
}
#radio1___1:checked ~ .pane .side-0,
#radio1___1:checked ~ .pane .side--1 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio1___1:checked ~ .pane .side-1,
#radio1___1:checked ~ .pane .side-0 .side {
    background-color: rgba(128, 255, 0, 0.9);
}
#radio1___1:checked ~ .pane .side-2,
#radio1___1:checked ~ .pane .side-1 .side {
    background-color: rgba(0, 255, 255, 0.9);
}
#radio1___1:checked ~ .pane .side-3,
#radio1___1:checked ~ .pane .side-2 .side {
    background-color: rgba(127, 0, 255, 0.9);
}
#radio1___1:checked ~ .pane .side-4,
#radio1___1:checked ~ .pane .side-3 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio1___1:checked ~ .pane .side:before {
    width: 50px;
}
#radio1___1:checked ~ .pane .side .area {
    -webkit-transform: rotatey(71.57951deg);
    -ms-transform: rotatey(71.57951deg);
    transform: rotatey(71.57951deg);
    width: 158.11388px;
}
#radio1___1:checked ~ .pane .side .area:before {
    width: 0;
    -webkit-transform: rotatey(-71.57951deg);
    -ms-transform: rotatey(-71.57951deg);
    transform: rotatey(-71.57951deg);
}
#radio1___1:checked ~ .pane .joint {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
#radio1___1:checked ~ .pane .offset {
    -webkit-transform: translatey(-70.71068px) rotate(-45deg);
    -ms-transform: translatey(-70.71068px) rotate(-45deg);
    transform: translatey(-70.71068px) rotate(-45deg);
}
#radio2___1:checked ~ #radio1___2:checked ~ .pane .side .area {
    -webkit-clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
    clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
}
#radio2___1:checked ~ #radio1___2:checked ~ .pane .side .area:before {
    top: 25%;
    right: 50%;
    height: 50%;
    visibility: visible;
    width: 34.40955px;
}
#radio2___1:checked ~ .pane .side-5 {
    opacity: 0;
}
#radio2___1:checked ~ .pane .side-0,
#radio2___1:checked ~ .pane .side--1 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio2___1:checked ~ .pane .side-1,
#radio2___1:checked ~ .pane .side-0 .side {
    background-color: rgba(204, 255, 0, 0.9);
}
#radio2___1:checked ~ .pane .side-2,
#radio2___1:checked ~ .pane .side-1 .side {
    background-color: rgba(0, 255, 102, 0.9);
}
#radio2___1:checked ~ .pane .side-3,
#radio2___1:checked ~ .pane .side-2 .side {
    background-color: rgba(0, 102, 255, 0.9);
}
#radio2___1:checked ~ .pane .side-4,
#radio2___1:checked ~ .pane .side-3 .side {
    background-color: rgba(204, 0, 255, 0.9);
}
#radio2___1:checked ~ .pane .side-5,
#radio2___1:checked ~ .pane .side-4 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio2___1:checked ~ .pane .side:before {
    width: 68.8191px;
}
#radio2___1:checked ~ .pane .side .area {
    -webkit-transform: rotatey(65.361deg);
    -ms-transform: rotatey(65.361deg);
    transform: rotatey(65.361deg);
    width: 165.03354px;
}
#radio2___1:checked ~ .pane .side .area:before {
    width: 0;
    -webkit-transform: rotatey(-65.361deg);
    -ms-transform: rotatey(-65.361deg);
    transform: rotatey(-65.361deg);
}
#radio2___1:checked ~ .pane .joint {
    -webkit-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    transform: rotate(72deg);
}
#radio2___1:checked ~ .pane .offset {
    -webkit-transform: translatey(-85.06508px) rotate(-54deg);
    -ms-transform: translatey(-85.06508px) rotate(-54deg);
    transform: translatey(-85.06508px) rotate(-54deg);
}
#radio3___1:checked ~ #radio1___2:checked ~ .pane .side .area {
    -webkit-clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
    clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
}
#radio3___1:checked ~ #radio1___2:checked ~ .pane .side .area:before {
    top: 25%;
    right: 50%;
    height: 50%;
    visibility: visible;
    width: 43.30127px;
}
#radio3___1:checked ~ .pane .side-6 {
    opacity: 0;
}
#radio3___1:checked ~ .pane .side-0,
#radio3___1:checked ~ .pane .side--1 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio3___1:checked ~ .pane .side-1,
#radio3___1:checked ~ .pane .side-0 .side {
    background-color: rgba(255, 255, 0, 0.9);
}
#radio3___1:checked ~ .pane .side-2,
#radio3___1:checked ~ .pane .side-1 .side {
    background-color: rgba(0, 255, 0, 0.9);
}
#radio3___1:checked ~ .pane .side-3,
#radio3___1:checked ~ .pane .side-2 .side {
    background-color: rgba(0, 255, 255, 0.9);
}
#radio3___1:checked ~ .pane .side-4,
#radio3___1:checked ~ .pane .side-3 .side {
    background-color: rgba(0, 0, 255, 0.9);
}
#radio3___1:checked ~ .pane .side-5,
#radio3___1:checked ~ .pane .side-4 .side {
    background-color: rgba(255, 0, 255, 0.9);
}
#radio3___1:checked ~ .pane .side-6,
#radio3___1:checked ~ .pane .side-5 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio3___1:checked ~ .pane .side:before {
    width: 86.60254px;
}
#radio3___1:checked ~ .pane .side .area {
    -webkit-transform: rotatey(60.02416deg);
    -ms-transform: rotatey(60.02416deg);
    transform: rotatey(60.02416deg);
    width: 173.20508px;
}
#radio3___1:checked ~ .pane .side .area:before {
    width: 0;
    -webkit-transform: rotatey(-60.02416deg);
    -ms-transform: rotatey(-60.02416deg);
    transform: rotatey(-60.02416deg);
}
#radio3___1:checked ~ .pane .joint {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}
#radio3___1:checked ~ .pane .offset {
    -webkit-transform: translatey(-100px) rotate(-60deg);
    -ms-transform: translatey(-100px) rotate(-60deg);
    transform: translatey(-100px) rotate(-60deg);
}
#radio4___1:checked ~ #radio1___2:checked ~ .pane .side .area {
    -webkit-clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
    clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
}
#radio4___1:checked ~ #radio1___2:checked ~ .pane .side .area:before {
    top: 25%;
    right: 50%;
    height: 50%;
    visibility: visible;
    width: 51.91303px;
}
#radio4___1:checked ~ .pane .side-7 {
    opacity: 0;
}
#radio4___1:checked ~ .pane .side-0,
#radio4___1:checked ~ .pane .side--1 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio4___1:checked ~ .pane .side-1,
#radio4___1:checked ~ .pane .side-0 .side {
    background-color: rgba(255, 219, 0, 0.9);
}
#radio4___1:checked ~ .pane .side-2,
#radio4___1:checked ~ .pane .side-1 .side {
    background-color: rgba(73, 255, 0, 0.9);
}
#radio4___1:checked ~ .pane .side-3,
#radio4___1:checked ~ .pane .side-2 .side {
    background-color: rgba(0, 255, 146, 0.9);
}
#radio4___1:checked ~ .pane .side-4,
#radio4___1:checked ~ .pane .side-3 .side {
    background-color: rgba(0, 146, 255, 0.9);
}
#radio4___1:checked ~ .pane .side-5,
#radio4___1:checked ~ .pane .side-4 .side {
    background-color: rgba(73, 0, 255, 0.9);
}
#radio4___1:checked ~ .pane .side-6,
#radio4___1:checked ~ .pane .side-5 .side {
    background-color: rgba(255, 0, 219, 0.9);
}
#radio4___1:checked ~ .pane .side-7,
#radio4___1:checked ~ .pane .side-6 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio4___1:checked ~ .pane .side:before {
    width: 103.82607px;
}
#radio4___1:checked ~ .pane .side .area {
    -webkit-transform: rotatey(55.3739deg);
    -ms-transform: rotatey(55.3739deg);
    transform: rotatey(55.3739deg);
    width: 182.42766px;
}
#radio4___1:checked ~ .pane .side .area:before {
    width: 0;
    -webkit-transform: rotatey(-55.3739deg);
    -ms-transform: rotatey(-55.3739deg);
    transform: rotatey(-55.3739deg);
}
#radio4___1:checked ~ .pane .joint {
    -webkit-transform: rotate(51.42857deg);
    -ms-transform: rotate(51.42857deg);
    transform: rotate(51.42857deg);
}
#radio4___1:checked ~ .pane .offset {
    -webkit-transform: translatey(-115.23824px) rotate(-64.28571deg);
    -ms-transform: translatey(-115.23824px) rotate(-64.28571deg);
    transform: translatey(-115.23824px) rotate(-64.28571deg);
}
#radio5___1:checked ~ #radio1___2:checked ~ .pane .side .area {
    -webkit-clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
    clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
}
#radio5___1:checked ~ #radio1___2:checked ~ .pane .side .area:before {
    top: 25%;
    right: 50%;
    height: 50%;
    visibility: visible;
    width: 60.35534px;
}
#radio5___1:checked ~ .pane .side-8 {
    opacity: 0;
}
#radio5___1:checked ~ .pane .side-0,
#radio5___1:checked ~ .pane .side--1 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio5___1:checked ~ .pane .side-1,
#radio5___1:checked ~ .pane .side-0 .side {
    background-color: rgba(255, 191, 0, 0.9);
}
#radio5___1:checked ~ .pane .side-2,
#radio5___1:checked ~ .pane .side-1 .side {
    background-color: rgba(128, 255, 0, 0.9);
}
#radio5___1:checked ~ .pane .side-3,
#radio5___1:checked ~ .pane .side-2 .side {
    background-color: rgba(0, 255, 64, 0.9);
}
#radio5___1:checked ~ .pane .side-4,
#radio5___1:checked ~ .pane .side-3 .side {
    background-color: rgba(0, 255, 255, 0.9);
}
#radio5___1:checked ~ .pane .side-5,
#radio5___1:checked ~ .pane .side-4 .side {
    background-color: rgba(0, 64, 255, 0.9);
}
#radio5___1:checked ~ .pane .side-6,
#radio5___1:checked ~ .pane .side-5 .side {
    background-color: rgba(127, 0, 255, 0.9);
}
#radio5___1:checked ~ .pane .side-7,
#radio5___1:checked ~ .pane .side-6 .side {
    background-color: rgba(255, 0, 191, 0.9);
}
#radio5___1:checked ~ .pane .side-8,
#radio5___1:checked ~ .pane .side-7 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio5___1:checked ~ .pane .side:before {
    width: 120.71068px;
}
#radio5___1:checked ~ .pane .side .area {
    -webkit-transform: rotatey(51.21202deg);
    -ms-transform: rotatey(51.21202deg);
    transform: rotatey(51.21202deg);
    width: 192.53848px;
}
#radio5___1:checked ~ .pane .side .area:before {
    width: 0;
    -webkit-transform: rotatey(-51.21202deg);
    -ms-transform: rotatey(-51.21202deg);
    transform: rotatey(-51.21202deg);
}
#radio5___1:checked ~ .pane .joint {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#radio5___1:checked ~ .pane .offset {
    -webkit-transform: translatey(-130.6563px) rotate(-67.5deg);
    -ms-transform: translatey(-130.6563px) rotate(-67.5deg);
    transform: translatey(-130.6563px) rotate(-67.5deg);
}
#radio6___1:checked ~ #radio1___2:checked ~ .pane .side .area {
    -webkit-clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
    clip-path: polygon(50% 75%, 100% 100%, 100% 0, 50% 25%, 50% 75%);
}
#radio6___1:checked ~ #radio1___2:checked ~ .pane .side .area:before {
    top: 25%;
    right: 50%;
    height: 50%;
    visibility: visible;
    width: 68.68694px;
}
#radio6___1:checked ~ .pane .side-9 {
    opacity: 0;
}
#radio6___1:checked ~ .pane .side-0,
#radio6___1:checked ~ .pane .side--1 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio6___1:checked ~ .pane .side-1,
#radio6___1:checked ~ .pane .side-0 .side {
    background-color: rgba(255, 170, 0, 0.9);
}
#radio6___1:checked ~ .pane .side-2,
#radio6___1:checked ~ .pane .side-1 .side {
    background-color: rgba(170, 255, 0, 0.9);
}
#radio6___1:checked ~ .pane .side-3,
#radio6___1:checked ~ .pane .side-2 .side {
    background-color: rgba(0, 255, 0, 0.9);
}
#radio6___1:checked ~ .pane .side-4,
#radio6___1:checked ~ .pane .side-3 .side {
    background-color: rgba(0, 255, 170, 0.9);
}
#radio6___1:checked ~ .pane .side-5,
#radio6___1:checked ~ .pane .side-4 .side {
    background-color: rgba(0, 170, 255, 0.9);
}
#radio6___1:checked ~ .pane .side-6,
#radio6___1:checked ~ .pane .side-5 .side {
    background-color: rgba(0, 0, 255, 0.9);
}
#radio6___1:checked ~ .pane .side-7,
#radio6___1:checked ~ .pane .side-6 .side {
    background-color: rgba(170, 0, 255, 0.9);
}
#radio6___1:checked ~ .pane .side-8,
#radio6___1:checked ~ .pane .side-7 .side {
    background-color: rgba(255, 0, 170, 0.9);
}
#radio6___1:checked ~ .pane .side-9,
#radio6___1:checked ~ .pane .side-8 .side {
    background-color: rgba(255, 0, 0, 0.9);
}
#radio6___1:checked ~ .pane .side:before {
    width: 137.37387px;
}
#radio6___1:checked ~ .pane .side .area {
    -webkit-transform: rotatey(47.54248deg);
    -ms-transform: rotatey(47.54248deg);
    transform: rotatey(47.54248deg);
    width: 203.40005px;
}
#radio6___1:checked ~ .pane .side .area:before {
    width: 0;
    -webkit-transform: rotatey(-47.54248deg);
    -ms-transform: rotatey(-47.54248deg);
    transform: rotatey(-47.54248deg);
}
#radio6___1:checked ~ .pane .joint {
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
}
#radio6___1:checked ~ .pane .offset {
    -webkit-transform: translatey(-146.19022px) rotate(-70deg);
    -ms-transform: translatey(-146.19022px) rotate(-70deg);
    transform: translatey(-146.19022px) rotate(-70deg);
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotatex(55deg) rotate(0);
        transform: rotatex(55deg) rotate(0);
    }
    100% {
        -webkit-transform: rotatex(55deg) rotate(360deg);
        transform: rotatex(55deg) rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        -webkit-transform: rotatex(55deg) rotate(0);
        transform: rotatex(55deg) rotate(0);
    }
    100% {
        -webkit-transform: rotatex(55deg) rotate(360deg);
        transform: rotatex(55deg) rotate(360deg);
    }
}

HTML

<input type="radio" name="radio___1" id="radio0___1" class="hidden radio0" />
<input type="radio" name="radio___1" id="radio1___1" class="hidden radio1" />
<input type="radio" name="radio___1" id="radio2___1" class="hidden radio2" />
<input type="radio" name="radio___1" id="radio3___1" class="hidden radio3" />
<input type="radio" name="radio___1" checked="checked" id="radio4___1" class="hidden radio4" />
<input type="radio" name="radio___1" id="radio5___1" class="hidden radio5" />
<input type="radio" name="radio___1" id="radio6___1" class="hidden radio6" />
<div lang="en" id="dropwown____1" class="dropdown DROPDOWN">
    <input type="checkbox" name="dropdown___1" id="dropdown___1" class="hidden dropdown-toggle" />
    <label for="dropdown___1" data-label-0="3 Parts" data-label-1="4 Parts" data-label-2="5 Parts" data-label-3="6 Parts" data-label-4="7 Parts" data-label-5="8 Parts" data-label-6="9 Parts" data-label-7="undefined" data-label-8="undefined" data-label-9="undefined"
    data-label-10="undefined" data-label-11="undefined" data-label-12="undefined" data-label-13="undefined" data-label-14="undefined" data-label-15="undefined" data-label-16="undefined" data-label-17="undefined" data-label-18="undefined" data-label-19="undefined"
    data-label-20="undefined" data-label-21="undefined" data-label-22="undefined" data-label-23="undefined" data-label-24="undefined" data-label-25="undefined" data-label-26="undefined" data-label-27="undefined" data-label-28="undefined" data-label-29="undefined"
    class="dropdown-select"></label>
    <ul class="dropdown-menu">
        <li class="dropdown-option">
            <label for="radio0___1" class="radio0">3 Parts </label>
        </li>
        <li class="dropdown-option">
            <label for="radio1___1" class="radio1">4 Parts </label>
        </li>
        <li class="dropdown-option">
            <label for="radio2___1" class="radio2">5 Parts </label>
        </li>
        <li class="dropdown-option">
            <label for="radio3___1" class="radio3">6 Parts </label>
        </li>
        <li class="dropdown-option">
            <label for="radio4___1" class="radio4">7 Parts </label>
        </li>
        <li class="dropdown-option">
            <label for="radio5___1" class="radio5">8 Parts </label>
        </li>
        <li class="dropdown-option">
            <label for="radio6___1" class="radio6">9 Parts </label>
        </li>
    </ul>
</div>
<input type="radio" name="radio___2" id="radio0___2" class="hidden radio0" />
<input type="radio" name="radio___2" checked="checked" id="radio1___2" class="hidden radio1" />
<div lang="en" id="dropwown____2" class="dropdown DROPDOWN">
    <input type="checkbox" name="dropdown___2" id="dropdown___2" class="hidden dropdown-toggle" />
    <label for="dropdown___2" data-label-0="Full" data-label-1="Half" data-label-2="undefined" data-label-3="undefined" data-label-4="undefined" data-label-5="undefined" data-label-6="undefined" data-label-7="undefined" data-label-8="undefined" data-label-9="undefined"
    data-label-10="undefined" data-label-11="undefined" data-label-12="undefined" data-label-13="undefined" data-label-14="undefined" data-label-15="undefined" data-label-16="undefined" data-label-17="undefined" data-label-18="undefined" data-label-19="undefined"
    data-label-20="undefined" data-label-21="undefined" data-label-22="undefined" data-label-23="undefined" data-label-24="undefined" data-label-25="undefined" data-label-26="undefined" data-label-27="undefined" data-label-28="undefined" data-label-29="undefined"
    class="dropdown-select"></label>
    <ul class="dropdown-menu">
        <li class="dropdown-option">
            <label for="radio0___2" class="radio0">Full </label>
        </li>
        <li class="dropdown-option">
            <label for="radio1___2" class="radio1">Half </label>
        </li>
    </ul>
</div>
<div class="pane">
    <div class="middle">
        <div class="offset">
            <div class="side side-0">
                <div class="area"></div>
                <div class="joint">
                    <div class="side side-1">
                        <div class="area"></div>
                        <div class="joint">
                            <div class="side side-2">
                                <div class="area"></div>
                                <div class="joint">
                                    <div class="side side-3">
                                        <div class="area"></div>
                                        <div class="joint">
                                            <div class="side side-4">
                                                <div class="area"></div>
                                                <div class="joint">
                                                    <div class="side side-5">
                                                        <div class="area"></div>
                                                        <div class="joint">
                                                            <div class="side side-6">
                                                                <div class="area"></div>
                                                                <div class="joint">
                                                                    <div class="side side-7">
                                                                        <div class="area"></div>
                                                                        <div class="joint">
                                                                            <div class="side side-8">
                                                                                <div class="area"></div>
                                                                                <div class="joint">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

POLYHEDRON | pyramids (CSS)

pyramid

编辑器支持Emmet

快捷键

POLYHEDRON | pyramids (CSS)

pyramid

很棒的纯CSS实现的3D金字塔内部透视

CSS3实现的3D三层金字塔

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：