$colorMain: #673ab7;

$colorSub: #00bcd4;

​

body, html {

    width: 100%;

    height: 100%;

    display: flex;

    // background: #333;

}

​

div {

    position: relative;

    width: 200px;

    height: 200px;

    box-sizing: border-box;

    margin: auto;

    border-radius: 50%;

    box-shadow: 1px 1px 4px 2px #222;

    overflow: hidden;

}

​

div:nth-child(1) {

    background: linear-gradient(-60deg, $colorMain, $colorSub);

}

​

div:nth-child(2) {

    background: 

            repeating-linear-gradient(30deg, #000 0, #000 10px, transparent 10px, transparent 45px),

            repeating-linear-gradient(60deg, #000 0, #000 10px, transparent 10px, transparent 45px),

            repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 45px);

}

​

div:nth-child(3) {

    // background: linear-gradient(135deg, #9c27b0, #0fd9f2);

    &::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: linear-gradient(-60deg, $colorMain, $colorSub);

        mask: 

            repeating-linear-gradient(30deg, #000 0, #000 10px, transparent 10px, transparent 45px),

            repeating-linear-gradient(60deg, #000 0, #000 10px, transparent 10px, transparent 45px),

            repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 45px);

        //-webkit-mask-composite: xor;

    }

}

​

div:nth-child(4) {

    // background: linear-gradient(135deg, #9c27b0, #0fd9f2);

    &::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: linear-gradient(-60deg, $colorMain, $colorSub);

        mask: 

            repeating-linear-gradient(30deg, #000 0, #000 10px, transparent 10px, transparent 45px),

            repeating-linear-gradient(60deg, #000 0, #000 10px, transparent 10px, transparent 45px),

            repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 45px);

        -webkit-mask-composite: xor;

    }

}