.Box {
    flex: 1;
}
.List{
    overflow: hidden;
    display: -webkit-box;
    margin: 20px;
}
.List > li{
    margin-right: 10px;
    width: calc(33.33% - 10px);
    padding: 10px;
    cursor: pointer;
    min-height: 50px;
}
.List .qiebian {
    display: flex;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(5, 146, 247, .6) inset, 0 0 35px 0 rgba(7, 104, 181, 0.5) inset;
    background: #0B1838;
    align-items: center;
    position: relative;
    transition: all 500ms;
}

.List .qiebian>i {
    background: #083D72;
    width: 1px;
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 50%;
}

.List .qiebian>p {
    padding:0 5px;
    flex: 1;
    color: rgba(105, 188, 232, 1);
    font-size: 18px;
    line-height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    transition: all 500ms;
    overflow: hidden;
    height: 90%;
}

.List .qiebian>p>span {
    font-size: 1.4em;
    margin-right: .5em;
    background-image: linear-gradient(180deg, rgba(10,238,245,1) 0%, rgba(6,147,255,1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 500ms;
    word-wrap: break-word;
    word-break: break-all;
}

.List .qiebian:after,
.List .qiebian:before {
    content: "";
    display: block;
    position: absolute;
    transition: all 500ms;
}

.List .qiebian:after {
    top: 0;
    left: 0;
    border-bottom: 5px solid #05071A;
    background: rgba(0, 68, 157, 1);
    width: 45px;
    height: 20px;
    transform: rotateZ(-50deg) translateY(-25px) translateX(-7px);
    box-shadow: 0 0 0 1px rgba(5, 146, 247, .6), 0 0 35px 0 rgba(10, 85, 170, 1);
    z-index: 1;
}

.List .qiebian:before {
    bottom: 0;
    right: 0;
    background: #05071A;
    width: 80px;
    height: 43px;
    transform: rotateZ(-44deg) translateY(55px);
    box-shadow: 0 0 0 1px rgba(5, 146, 247, .6), 0 0 35px 0 rgba(10, 85, 170, 1);
}
/* .List .qiebian:hover  */
.List .qiebian.active{
    box-shadow: 0 0 0 1px rgba(97, 173, 246, 1) inset, 0 0 35px 1px rgba(97, 173, 246, 1) inset;
}
/* .List .qiebian:hover>p  */
.List .qiebian.active>p{
    color: rgba(255, 255, 255, 1);
}
/* .List .qiebian:hover>p>span  */
.List .qiebian.active>p>span{
    background-image: linear-gradient(180deg, rgba(27, 255, 93, 1) 0%, rgba(27, 255, 93, 1) 100%);
}
/* .List .qiebian:hover:after  */
.List .qiebian.active:after{
    box-shadow: 0 0 0 1px rgba(97, 173, 246, 1), 0 0 35px 1px #59A6E3, 0 0 0 50px #59A6E3 inset;
}
/* .List .qiebian:hover:before */
.List .qiebian.active::before{
    box-shadow: 0 0 0 1px rgba(97, 173, 246, 1), 0 0 35px 1px #59A6E3;
}