*,:after,:before{box-sizing:border-box}.demo{touch-action:none;height:100%;display:flex;flex-flow:column nowrap}.demo .top{width:100%;max-height:300px}.demo .content{overflow-y:auto;background:#f6f7fb;background-color:#fff;padding:20px 10px;display:flex;flex-wrap:wrap;list-style:none;justify-content:center;transform:translateY(34.375px)}.demo .content-item{width:28%;height:55px;margin:12px 5px 25px;border-radius:5px;font-size:12px;line-height:20px;background-color:var(--bgcolor);transition:opacity .35s;text-align:center;z-index:1;position:relative;display:flex;align-items:center;flex-direction:column;justify-content:end;cursor:pointer}.demo .content-item img{position:absolute;top:0;height:30px;width:30px}.demo .content-item:before{background:var(--bgcolor);transform:scale(1.055)}.demo .content-item:after{background:var(--bgcolor);transition:opacity .35s}.demo .content-item:after,.demo .content-item:before{content:""}.demo .content-item:hover:before{background:#aaddf8;transition:opacity .35s}.demo .content-item:hover:after{transition:opacity .35s}.demo .content-item:after,.demo .content-item:before{top:-50%;left:0;width:100%;height:200%;display:block;position:absolute;-webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);z-index:-1}.demo .content .itemClass{width:100%;height:0;margin:0;padding:0;border:none}.demo .content .itemClass:after{border:none}