CSS3 带阴影效果的三维球体

看起来像昏黄的灯笼

CSS3

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #333;
    overflow: hidden;
}
.pane {
    height: 942.4778px;
    width: 942.4778px;
    margin: -471.2389px;
    -webkit-perspective: 700px;
    perspective: 700px;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-filter: contrast(3);
    filter: contrast(3);
}
.pane,
.pane div,
.pane div:before {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.pane .sphere {
    height: 100%;
    width: 100%;
    margin: -50%;
    -webkit-transform: rotate3d(-1, 0, 0, 45deg) rotate3d(0, -1, 0, 45deg);
    transform: rotate3d(-1, 0, 0, 45deg) rotate3d(0, -1, 0, 45deg);
}
.pane .slice {
    height: 943px;
    width: 53px;
    margin: -472px -26px;
}
.pane .slice .part:before,
.pane .slice .side:before {
    background-color: rgba(255, 204, 153, 0.99);
    background-image: -webkit-linear-gradient(left, rgba(214, 112, 92, 0.4), rgba(163, 82, 41, 0.5), rgba(122, 77, 31, 0.8) 25%, rgba(82, 31, 20, 0.8), rgba(122, 77, 31, 0.8) 75%, rgba(163, 82, 41, 0.5), rgba(214, 112, 92, 0.4));
    background-image: linear-gradient(to right, rgba(214, 112, 92, 0.4), rgba(163, 82, 41, 0.5), rgba(122, 77, 31, 0.8) 25%, rgba(82, 31, 20, 0.8), rgba(122, 77, 31, 0.8) 75%, rgba(163, 82, 41, 0.5), rgba(214, 112, 92, 0.4));
    background-size: 1884.95559px 52.35988px;
}
.pane .slice:nth-child(1) {
    -webkit-transform: rotatey(0deg) translatez(300px);
    -ms-transform: rotatey(0deg) translatez(300px);
    transform: rotatey(0deg) translatez(300px);
}
.pane .slice:nth-child(1) .side:nth-child(1) .part:before,
.pane .slice:nth-child(1) .side:nth-child(1):before {
    background-position: 52.35988px 0;
}
.pane .slice:nth-child(1) .side:nth-child(2) .part:before,
.pane .slice:nth-child(1) .side:nth-child(2):before {
    background-position: 0px 0;
}
.pane .slice:nth-child(2) {
    -webkit-transform: rotatey(10deg) translatez(300px);
    -ms-transform: rotatey(10deg) translatez(300px);
    transform: rotatey(10deg) translatez(300px);
}
.pane .slice:nth-child(2) .side:nth-child(1) .part:before,
.pane .slice:nth-child(2) .side:nth-child(1):before {
    background-position: 0px 0;
}
.pane .slice:nth-child(2) .side:nth-child(2) .part:before,
.pane .slice:nth-child(2) .side:nth-child(2):before {
    background-position: 52.35988px 0;
}
.pane .slice:nth-child(3) {
    -webkit-transform: rotatey(20deg) translatez(300px);
    -ms-transform: rotatey(20deg) translatez(300px);
    transform: rotatey(20deg) translatez(300px);
}
.pane .slice:nth-child(3) .side:nth-child(1) .part:before,
.pane .slice:nth-child(3) .side:nth-child(1):before {
    background-position: -52.35988px 0;
}
.pane .slice:nth-child(3) .side:nth-child(2) .part:before,
.pane .slice:nth-child(3) .side:nth-child(2):before {
    background-position: 104.71976px 0;
}
.pane .slice:nth-child(4) {
    -webkit-transform: rotatey(30deg) translatez(300px);
    -ms-transform: rotatey(30deg) translatez(300px);
    transform: rotatey(30deg) translatez(300px);
}
.pane .slice:nth-child(4) .side:nth-child(1) .part:before,
.pane .slice:nth-child(4) .side:nth-child(1):before {
    background-position: -104.71976px 0;
}
.pane .slice:nth-child(4) .side:nth-child(2) .part:before,
.pane .slice:nth-child(4) .side:nth-child(2):before {
    background-position: 157.07963px 0;
}
.pane .slice:nth-child(5) {
    -webkit-transform: rotatey(40deg) translatez(300px);
    -ms-transform: rotatey(40deg) translatez(300px);
    transform: rotatey(40deg) translatez(300px);
}
.pane .slice:nth-child(5) .side:nth-child(1) .part:before,
.pane .slice:nth-child(5) .side:nth-child(1):before {
    background-position: -157.07963px 0;
}
.pane .slice:nth-child(5) .side:nth-child(2) .part:before,
.pane .slice:nth-child(5) .side:nth-child(2):before {
    background-position: 209.43951px 0;
}
.pane .slice:nth-child(6) {
    -webkit-transform: rotatey(50deg) translatez(300px);
    -ms-transform: rotatey(50deg) translatez(300px);
    transform: rotatey(50deg) translatez(300px);
}
.pane .slice:nth-child(6) .side:nth-child(1) .part:before,
.pane .slice:nth-child(6) .side:nth-child(1):before {
    background-position: -209.43951px 0;
}
.pane .slice:nth-child(6) .side:nth-child(2) .part:before,
.pane .slice:nth-child(6) .side:nth-child(2):before {
    background-position: 261.79939px 0;
}
.pane .slice:nth-child(7) {
    -webkit-transform: rotatey(60deg) translatez(300px);
    -ms-transform: rotatey(60deg) translatez(300px);
    transform: rotatey(60deg) translatez(300px);
}
.pane .slice:nth-child(7) .side:nth-child(1) .part:before,
.pane .slice:nth-child(7) .side:nth-child(1):before {
    background-position: -261.79939px 0;
}
.pane .slice:nth-child(7) .side:nth-child(2) .part:before,
.pane .slice:nth-child(7) .side:nth-child(2):before {
    background-position: 314.15927px 0;
}
.pane .slice:nth-child(8) {
    -webkit-transform: rotatey(70deg) translatez(300px);
    -ms-transform: rotatey(70deg) translatez(300px);
    transform: rotatey(70deg) translatez(300px);
}
.pane .slice:nth-child(8) .side:nth-child(1) .part:before,
.pane .slice:nth-child(8) .side:nth-child(1):before {
    background-position: -314.15927px 0;
}
.pane .slice:nth-child(8) .side:nth-child(2) .part:before,
.pane .slice:nth-child(8) .side:nth-child(2):before {
    background-position: 366.51914px 0;
}
.pane .slice:nth-child(9) {
    -webkit-transform: rotatey(80deg) translatez(300px);
    -ms-transform: rotatey(80deg) translatez(300px);
    transform: rotatey(80deg) translatez(300px);
}
.pane .slice:nth-child(9) .side:nth-child(1) .part:before,
.pane .slice:nth-child(9) .side:nth-child(1):before {
    background-position: -366.51914px 0;
}
.pane .slice:nth-child(9) .side:nth-child(2) .part:before,
.pane .slice:nth-child(9) .side:nth-child(2):before {
    background-position: 418.87902px 0;
}
.pane .slice:nth-child(10) {
    -webkit-transform: rotatey(90deg) translatez(300px);
    -ms-transform: rotatey(90deg) translatez(300px);
    transform: rotatey(90deg) translatez(300px);
}
.pane .slice:nth-child(10) .side:nth-child(1) .part:before,
.pane .slice:nth-child(10) .side:nth-child(1):before {
    background-position: -418.87902px 0;
}
.pane .slice:nth-child(10) .side:nth-child(2) .part:before,
.pane .slice:nth-child(10) .side:nth-child(2):before {
    background-position: 471.2389px 0;
}
.pane .slice:nth-child(11) {
    -webkit-transform: rotatey(100deg) translatez(300px);
    -ms-transform: rotatey(100deg) translatez(300px);
    transform: rotatey(100deg) translatez(300px);
}
.pane .slice:nth-child(11) .side:nth-child(1) .part:before,
.pane .slice:nth-child(11) .side:nth-child(1):before {
    background-position: -471.2389px 0;
}
.pane .slice:nth-child(11) .side:nth-child(2) .part:before,
.pane .slice:nth-child(11) .side:nth-child(2):before {
    background-position: 523.59878px 0;
}
.pane .slice:nth-child(12) {
    -webkit-transform: rotatey(110deg) translatez(300px);
    -ms-transform: rotatey(110deg) translatez(300px);
    transform: rotatey(110deg) translatez(300px);
}
.pane .slice:nth-child(12) .side:nth-child(1) .part:before,
.pane .slice:nth-child(12) .side:nth-child(1):before {
    background-position: -523.59878px 0;
}
.pane .slice:nth-child(12) .side:nth-child(2) .part:before,
.pane .slice:nth-child(12) .side:nth-child(2):before {
    background-position: 575.95865px 0;
}
.pane .slice:nth-child(13) {
    -webkit-transform: rotatey(120deg) translatez(300px);
    -ms-transform: rotatey(120deg) translatez(300px);
    transform: rotatey(120deg) translatez(300px);
}
.pane .slice:nth-child(13) .side:nth-child(1) .part:before,
.pane .slice:nth-child(13) .side:nth-child(1):before {
    background-position: -575.95865px 0;
}
.pane .slice:nth-child(13) .side:nth-child(2) .part:before,
.pane .slice:nth-child(13) .side:nth-child(2):before {
    background-position: 628.31853px 0;
}
.pane .slice:nth-child(14) {
    -webkit-transform: rotatey(130deg) translatez(300px);
    -ms-transform: rotatey(130deg) translatez(300px);
    transform: rotatey(130deg) translatez(300px);
}
.pane .slice:nth-child(14) .side:nth-child(1) .part:before,
.pane .slice:nth-child(14) .side:nth-child(1):before {
    background-position: -628.31853px 0;
}
.pane .slice:nth-child(14) .side:nth-child(2) .part:before,
.pane .slice:nth-child(14) .side:nth-child(2):before {
    background-position: 680.67841px 0;
}
.pane .slice:nth-child(15) {
    -webkit-transform: rotatey(140deg) translatez(300px);
    -ms-transform: rotatey(140deg) translatez(300px);
    transform: rotatey(140deg) translatez(300px);
}
.pane .slice:nth-child(15) .side:nth-child(1) .part:before,
.pane .slice:nth-child(15) .side:nth-child(1):before {
    background-position: -680.67841px 0;
}
.pane .slice:nth-child(15) .side:nth-child(2) .part:before,
.pane .slice:nth-child(15) .side:nth-child(2):before {
    background-position: 733.03829px 0;
}
.pane .slice:nth-child(16) {
    -webkit-transform: rotatey(150deg) translatez(300px);
    -ms-transform: rotatey(150deg) translatez(300px);
    transform: rotatey(150deg) translatez(300px);
}
.pane .slice:nth-child(16) .side:nth-child(1) .part:before,
.pane .slice:nth-child(16) .side:nth-child(1):before {
    background-position: -733.03829px 0;
}
.pane .slice:nth-child(16) .side:nth-child(2) .part:before,
.pane .slice:nth-child(16) .side:nth-child(2):before {
    background-position: 785.39816px 0;
}
.pane .slice:nth-child(17) {
    -webkit-transform: rotatey(160deg) translatez(300px);
    -ms-transform: rotatey(160deg) translatez(300px);
    transform: rotatey(160deg) translatez(300px);
}
.pane .slice:nth-child(17) .side:nth-child(1) .part:before,
.pane .slice:nth-child(17) .side:nth-child(1):before {
    background-position: -785.39816px 0;
}
.pane .slice:nth-child(17) .side:nth-child(2) .part:before,
.pane .slice:nth-child(17) .side:nth-child(2):before {
    background-position: 837.75804px 0;
}
.pane .slice:nth-child(18) {
    -webkit-transform: rotatey(170deg) translatez(300px);
    -ms-transform: rotatey(170deg) translatez(300px);
    transform: rotatey(170deg) translatez(300px);
}
.pane .slice:nth-child(18) .side:nth-child(1) .part:before,
.pane .slice:nth-child(18) .side:nth-child(1):before {
    background-position: -837.75804px 0;
}
.pane .slice:nth-child(18) .side:nth-child(2) .part:before,
.pane .slice:nth-child(18) .side:nth-child(2):before {
    background-position: 890.11792px 0;
}
.pane .slice:nth-child(19) {
    -webkit-transform: rotatey(180deg) translatez(300px);
    -ms-transform: rotatey(180deg) translatez(300px);
    transform: rotatey(180deg) translatez(300px);
}
.pane .slice:nth-child(19) .side:nth-child(1) .part:before,
.pane .slice:nth-child(19) .side:nth-child(1):before {
    background-position: -890.11792px 0;
}
.pane .slice:nth-child(19) .side:nth-child(2) .part:before,
.pane .slice:nth-child(19) .side:nth-child(2):before {
    background-position: 942.4778px 0;
}
.pane .slice:nth-child(20) {
    -webkit-transform: rotatey(190deg) translatez(300px);
    -ms-transform: rotatey(190deg) translatez(300px);
    transform: rotatey(190deg) translatez(300px);
}
.pane .slice:nth-child(20) .side:nth-child(1) .part:before,
.pane .slice:nth-child(20) .side:nth-child(1):before {
    background-position: -942.4778px 0;
}
.pane .slice:nth-child(20) .side:nth-child(2) .part:before,
.pane .slice:nth-child(20) .side:nth-child(2):before {
    background-position: 994.83767px 0;
}
.pane .slice:nth-child(21) {
    -webkit-transform: rotatey(200deg) translatez(300px);
    -ms-transform: rotatey(200deg) translatez(300px);
    transform: rotatey(200deg) translatez(300px);
}
.pane .slice:nth-child(21) .side:nth-child(1) .part:before,
.pane .slice:nth-child(21) .side:nth-child(1):before {
    background-position: -994.83767px 0;
}
.pane .slice:nth-child(21) .side:nth-child(2) .part:before,
.pane .slice:nth-child(21) .side:nth-child(2):before {
    background-position: 1047.19755px 0;
}
.pane .slice:nth-child(22) {
    -webkit-transform: rotatey(210deg) translatez(300px);
    -ms-transform: rotatey(210deg) translatez(300px);
    transform: rotatey(210deg) translatez(300px);
}
.pane .slice:nth-child(22) .side:nth-child(1) .part:before,
.pane .slice:nth-child(22) .side:nth-child(1):before {
    background-position: -1047.19755px 0;
}
.pane .slice:nth-child(22) .side:nth-child(2) .part:before,
.pane .slice:nth-child(22) .side:nth-child(2):before {
    background-position: 1099.55743px 0;
}
.pane .slice:nth-child(23) {
    -webkit-transform: rotatey(220deg) translatez(300px);
    -ms-transform: rotatey(220deg) translatez(300px);
    transform: rotatey(220deg) translatez(300px);
}
.pane .slice:nth-child(23) .side:nth-child(1) .part:before,
.pane .slice:nth-child(23) .side:nth-child(1):before {
    background-position: -1099.55743px 0;
}
.pane .slice:nth-child(23) .side:nth-child(2) .part:before,
.pane .slice:nth-child(23) .side:nth-child(2):before {
    background-position: 1151.91731px 0;
}
.pane .slice:nth-child(24) {
    -webkit-transform: rotatey(230deg) translatez(300px);
    -ms-transform: rotatey(230deg) translatez(300px);
    transform: rotatey(230deg) translatez(300px);
}
.pane .slice:nth-child(24) .side:nth-child(1) .part:before,
.pane .slice:nth-child(24) .side:nth-child(1):before {
    background-position: -1151.91731px 0;
}
.pane .slice:nth-child(24) .side:nth-child(2) .part:before,
.pane .slice:nth-child(24) .side:nth-child(2):before {
    background-position: 1204.27718px 0;
}
.pane .slice:nth-child(25) {
    -webkit-transform: rotatey(240deg) translatez(300px);
    -ms-transform: rotatey(240deg) translatez(300px);
    transform: rotatey(240deg) translatez(300px);
}
.pane .slice:nth-child(25) .side:nth-child(1) .part:before,
.pane .slice:nth-child(25) .side:nth-child(1):before {
    background-position: -1204.27718px 0;
}
.pane .slice:nth-child(25) .side:nth-child(2) .part:before,
.pane .slice:nth-child(25) .side:nth-child(2):before {
    background-position: 1256.63706px 0;
}
.pane .slice:nth-child(26) {
    -webkit-transform: rotatey(250deg) translatez(300px);
    -ms-transform: rotatey(250deg) translatez(300px);
    transform: rotatey(250deg) translatez(300px);
}
.pane .slice:nth-child(26) .side:nth-child(1) .part:before,
.pane .slice:nth-child(26) .side:nth-child(1):before {
    background-position: -1256.63706px 0;
}
.pane .slice:nth-child(26) .side:nth-child(2) .part:before,
.pane .slice:nth-child(26) .side:nth-child(2):before {
    background-position: 1308.99694px 0;
}
.pane .slice:nth-child(27) {
    -webkit-transform: rotatey(260deg) translatez(300px);
    -ms-transform: rotatey(260deg) translatez(300px);
    transform: rotatey(260deg) translatez(300px);
}
.pane .slice:nth-child(27) .side:nth-child(1) .part:before,
.pane .slice:nth-child(27) .side:nth-child(1):before {
    background-position: -1308.99694px 0;
}
.pane .slice:nth-child(27) .side:nth-child(2) .part:before,
.pane .slice:nth-child(27) .side:nth-child(2):before {
    background-position: 1361.35682px 0;
}
.pane .slice:nth-child(28) {
    -webkit-transform: rotatey(270deg) translatez(300px);
    -ms-transform: rotatey(270deg) translatez(300px);
    transform: rotatey(270deg) translatez(300px);
}
.pane .slice:nth-child(28) .side:nth-child(1) .part:before,
.pane .slice:nth-child(28) .side:nth-child(1):before {
    background-position: -1361.35682px 0;
}
.pane .slice:nth-child(28) .side:nth-child(2) .part:before,
.pane .slice:nth-child(28) .side:nth-child(2):before {
    background-position: 1413.71669px 0;
}
.pane .slice:nth-child(29) {
    -webkit-transform: rotatey(280deg) translatez(300px);
    -ms-transform: rotatey(280deg) translatez(300px);
    transform: rotatey(280deg) translatez(300px);
}
.pane .slice:nth-child(29) .side:nth-child(1) .part:before,
.pane .slice:nth-child(29) .side:nth-child(1):before {
    background-position: -1413.71669px 0;
}
.pane .slice:nth-child(29) .side:nth-child(2) .part:before,
.pane .slice:nth-child(29) .side:nth-child(2):before {
    background-position: 1466.07657px 0;
}
.pane .slice:nth-child(30) {
    -webkit-transform: rotatey(290deg) translatez(300px);
    -ms-transform: rotatey(290deg) translatez(300px);
    transform: rotatey(290deg) translatez(300px);
}
.pane .slice:nth-child(30) .side:nth-child(1) .part:before,
.pane .slice:nth-child(30) .side:nth-child(1):before {
    background-position: -1466.07657px 0;
}
.pane .slice:nth-child(30) .side:nth-child(2) .part:before,
.pane .slice:nth-child(30) .side:nth-child(2):before {
    background-position: 1518.43645px 0;
}
.pane .slice:nth-child(31) {
    -webkit-transform: rotatey(300deg) translatez(300px);
    -ms-transform: rotatey(300deg) translatez(300px);
    transform: rotatey(300deg) translatez(300px);
}
.pane .slice:nth-child(31) .side:nth-child(1) .part:before,
.pane .slice:nth-child(31) .side:nth-child(1):before {
    background-position: -1518.43645px 0;
}
.pane .slice:nth-child(31) .side:nth-child(2) .part:before,
.pane .slice:nth-child(31) .side:nth-child(2):before {
    background-position: 1570.79633px 0;
}
.pane .slice:nth-child(32) {
    -webkit-transform: rotatey(310deg) translatez(300px);
    -ms-transform: rotatey(310deg) translatez(300px);
    transform: rotatey(310deg) translatez(300px);
}
.pane .slice:nth-child(32) .side:nth-child(1) .part:before,
.pane .slice:nth-child(32) .side:nth-child(1):before {
    background-position: -1570.79633px 0;
}
.pane .slice:nth-child(32) .side:nth-child(2) .part:before,
.pane .slice:nth-child(32) .side:nth-child(2):before {
    background-position: 1623.1562px 0;
}
.pane .slice:nth-child(33) {
    -webkit-transform: rotatey(320deg) translatez(300px);
    -ms-transform: rotatey(320deg) translatez(300px);
    transform: rotatey(320deg) translatez(300px);
}
.pane .slice:nth-child(33) .side:nth-child(1) .part:before,
.pane .slice:nth-child(33) .side:nth-child(1):before {
    background-position: -1623.1562px 0;
}
.pane .slice:nth-child(33) .side:nth-child(2) .part:before,
.pane .slice:nth-child(33) .side:nth-child(2):before {
    background-position: 1675.51608px 0;
}
.pane .slice:nth-child(34) {
    -webkit-transform: rotatey(330deg) translatez(300px);
    -ms-transform: rotatey(330deg) translatez(300px);
    transform: rotatey(330deg) translatez(300px);
}
.pane .slice:nth-child(34) .side:nth-child(1) .part:before,
.pane .slice:nth-child(34) .side:nth-child(1):before {
    background-position: -1675.51608px 0;
}
.pane .slice:nth-child(34) .side:nth-child(2) .part:before,
.pane .slice:nth-child(34) .side:nth-child(2):before {
    background-position: 1727.87596px 0;
}
.pane .slice:nth-child(35) {
    -webkit-transform: rotatey(340deg) translatez(300px);
    -ms-transform: rotatey(340deg) translatez(300px);
    transform: rotatey(340deg) translatez(300px);
}
.pane .slice:nth-child(35) .side:nth-child(1) .part:before,
.pane .slice:nth-child(35) .side:nth-child(1):before {
    background-position: -1727.87596px 0;
}
.pane .slice:nth-child(35) .side:nth-child(2) .part:before,
.pane .slice:nth-child(35) .side:nth-child(2):before {
    background-position: 1780.23584px 0;
}
.pane .slice:nth-child(36) {
    -webkit-transform: rotatey(350deg) translatez(300px);
    -ms-transform: rotatey(350deg) translatez(300px);
    transform: rotatey(350deg) translatez(300px);
}
.pane .slice:nth-child(36) .side:nth-child(1) .part:before,
.pane .slice:nth-child(36) .side:nth-child(1):before {
    background-position: -1780.23584px 0;
}
.pane .slice:nth-child(36) .side:nth-child(2) .part:before,
.pane .slice:nth-child(36) .side:nth-child(2):before {
    background-position: 1832.59571px 0;
}
.pane .side {
    width: 52.35988px;
    height: 26.17994px;
    margin: -13px -26px;
}
.pane .side:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: visible;
    content: '';
}
.pane .side:nth-child(1) {
    margin: 13px -26px;
}
.pane .side:nth-child(2) {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.pane .part {
    top: 50%;
    width: 53px;
    height: 52.35988px;
    margin: 0 -26px;
    -webkit-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: rotatex(-10deg);
    -ms-transform: rotatex(-10deg);
    transform: rotatex(-10deg);
}
.pane .part:before {
    -webkit-clip-path: polygon(0 0, 0px 100%, 52px 100%, 100% 0, 0 0);
    clip-path: polygon(0 0, 0px 100%, 52px 100%, 100% 0, 0 0);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: visible;
    content: '';
}
.pane .part .part {
    top: 100%;
}
.pane .part .part {
    width: 51px;
    margin: 0 -25px;
}
.pane .part .part:before {
    -webkit-clip-path: polygon(0 0, 1px 100%, 50px 100%, 100% 0, 0 0);
    clip-path: polygon(0 0, 1px 100%, 50px 100%, 100% 0, 0 0);
}
.pane .part .part .part {
    width: 48px;
    margin: 0 -23px;
}
.pane .part .part .part:before {
    -webkit-clip-path: polygon(0 0, 2px 100%, 46px 100%, 100% 0, 0 0);
    clip-path: polygon(0 0, 2px 100%, 46px 100%, 100% 0, 0 0);
}
.pane .part .part .part .part {
    width: 44px;
    margin: 0 -21px;
}
.pane .part .part .part .part:before {
    -webkit-clip-path: polygon(0 0, 3px 100%, 41px 100%, 100% 0, 0 0);
    clip-path: polygon(0 0, 3px 100%, 41px 100%, 100% 0, 0 0);
}
.pane .part .part .part .part .part {
    width: 38px;
    margin: 0 -18px;
}
.pane .part .part .part .part .part:before {
    -webkit-clip-path: polygon(0 0, 3px 100%, 35px 100%, 100% 0, 0 0);
    clip-path: polygon(0 0, 3px 100%, 35px 100%, 100% 0, 0 0);
}
.pane .part .part .part .part .part .part {
    width: 31px;
    margin: 0 -15px;
}
.pane .part .part .part .part .part .part:before {
    -webkit-clip-path: polygon(0 0, 4px 100%, 27px 100%, 100% 0, 0 0);
    clip-path: polygon(0 0, 4px 100%, 27px 100%, 100% 0, 0 0);
}
.pane .part .part .part .part .part .part .part {
    width: 23px;
    margin: 0 -11px;
}
.pane .part .part .part .part .part .part .part:before {
    -webkit-clip-path: polygon(0 0, 4px 100%, 19px 100%, 100% 0, 0 0);
    clip-path: polygon(0 0, 4px 100%, 19px 100%, 100% 0, 0 0);
}
.pane .part .part .part .part .part .part .part .part {
    width: 14px;
    margin: 0 -6px;
}
.pane .part .part .part .part .part .part .part .part:before {
    -webkit-clip-path: polygon(0 0, 4px 100%, 10px 100%, 100% 0, 0 0);
    clip-path: polygon(0 0, 4px 100%, 10px 100%, 100% 0, 0 0);
}

HTML

看起来像昏黄的灯笼

CSS3

编辑器支持Emmet

快捷键

看起来像昏黄的灯笼

CSS3

CSS3 带阴影效果的正方体齿轮动画

CSS3 大的红色带阴影3D效果按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：