.triangle {
    width: 100px;
    height: 80px;
    background-color: #ff8283;
    -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    clip-path:polygon(0% 100%, 50% 0%, 100% 100%);
}

.triangleRight {
    width: 80px;
    height: 100px;
    background-color: #ff8283;
    -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}
.circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#ff8283;
}
.ling{
    width:100px;
    height:100px;
    background-color:#ff8283;
    -webkit-clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%);
    clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%);
}
.qiu {
    display: block;
    background: #c83253;
    border-radius: 100%;
    height: 100px;
    width: 100px;
    margin: 0;
    background: radial-gradient(circle at 33% 33%, #f0bfca, #c83253);
}



.star {
    width: 100px;
    height: 100px;
    background: #faea8b;
    -webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
    clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
}




.step1{
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    -webkit-clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 7% 50%);
    clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 7% 50%);
    background: #FF8000;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
}

.step1Dis{
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    -webkit-clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 7% 50%);
    clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 7% 50%);
    background: #989898;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
}

.step2{
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    -webkit-clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 0% 50%);
    clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 0% 50%);
    background: #40c381;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
}

.step2Dis{
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    -webkit-clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 0% 50%);
    clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 0% 50%);
    background: #989898;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
}

.leftArrow{
    width: 100px;
    height: 50px;
    background: #FF8000;
    -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}

.rightArrow{
    width: 100px;
    height: 50px;
    background: #FF8000;
    -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}


.close{
    width: 100px;
    height: 100px;
    background: #ff0000;
    -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

.plus{
    width: 100px;
    height: 100px;
    background: #40c381;
    -webkit-clip-path: polygon(0% 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%);
    clip-path: polygon(0% 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%);
}

.sub{
    width: 100px;
    height: 100px;
    background: #40c381;
    -webkit-clip-path: polygon(0% 35%, 100% 35%,100% 65%,0% 65%);
    clip-path: polygon(0% 35%, 100% 35%,100% 65%,0% 65%);
}