div {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 200px;

    height: 200px;

    transform: translate(-50%, -50%);

    background: linear-gradient(

            45deg,

            rgba(255, 255, 255, 0) 35%,

            rgba(255, 255, 255, 0.4) 50%,

            rgba(255, 255, 255, 0) 65%

        ),

        linear-gradient(

            -45deg,

            rgba(255, 255, 255, 0) 35%,

            rgba(255, 255, 255, 0.4) 50%,

            rgba(255, 255, 255, 0) 65%

        ),

        linear-gradient(

            to right,

            rgba(0, 0, 0, 0) 35%,

            rgba(0, 0, 0, 0.2) 50%,

            rgba(0, 0, 0, 0) 65%

        ),

        linear-gradient(

            to bottom,

            rgba(0, 0, 0, 0) 35%,

            rgba(0, 0, 0, 0.2) 50%,

            rgba(0, 0, 0, 0) 65%

        ),

        radial-gradient(

            at center,

            #0033b0 20%,

            #ce0021 20%,

            #ce0021 35%,

            #eee 35%,

            #eee 55%,

            #ce0021 55%

        );

    border-radius: 50%;

    box-shadow: 0 3px 0 #a20917, 0 4px 2px 2px #eee;

}

div::before {

    content: "★";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    margin-left: -3px;

    width: 50px;

    height: 50px;

    font-family: simsun, Tahoma, Helvetica, Arial, SimHei, sans-serif;

    line-height: 47px;

    z-index: 1;

    border-radius: 50%;

    font-size: 55px;

    color: #fff;

    text-align: center;

    text-shadow: 2px 1px 2px #777;

}

​