.octaPlace{width:80%;height:600px;border:1px solid #fff;margin:10px auto;position:relative}.octaPlace1{position:absolute;top:calc(50% - 110px);left:50%}.octaPlace1,.octagon1{width:200px;height:220px}.octagon1{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background-image:linear-gradient(270deg,#e2b215,#fcde44)}.octaPlace2{position:absolute;top:calc(50% - 110px);left:calc(50% - 200px)}.octaPlace2,.octagon2{width:200px;height:220px}.octagon2{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background-image:linear-gradient(270deg,#e2b215,#fcde44)}.octaPlace3{top:calc(50% - 330px);left:calc(50% - 100px)}.octaPlace3,.octagon3{width:200px;height:220px;position:absolute}.octagon3{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background-image:linear-gradient(270deg,#e2b215,#fcde44);bottom:-54px}.octaPlace4{top:calc(50% + 110px);left:calc(50% - 100px)}.octaPlace4,.octagon4{width:200px;height:220px;position:absolute}.octagon4{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background-image:linear-gradient(270deg,#e2b215,#fcde44);top:-54px}.octaPlace5{top:calc(50% + 110px);left:calc(50% + 100px)}.octaPlace5,.octagon5{width:200px;height:220px;position:absolute}.octagon5{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background-image:linear-gradient(270deg,#e2b215,#fcde44);top:-54px}.octaPlace6{border:1px solid #fff;top:calc(50% - 330px);left:calc(50% + 100px)}.octaPlace6,.octagon6{width:200px;height:220px;position:absolute}.octagon6{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background-image:linear-gradient(270deg,#e2b215,#fcde44);bottom:-54px;opacity:.5}