* {
    box-sizing: border-box !important;
}

html {
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    background: #233637;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.diamond{
    position: relative;
    width: 20rem;
    height: 20rem;
    transform: rotate(45deg);
}

span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 5rem solid transparent;
    border-right: 5rem solid rgb(0, 0, 131);
    border-bottom: 5rem solid blue;
    border-left: 5rem solid transparent;
}

span:nth-child(2) {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 5rem solid  rgb(44, 44, 236);
    border-right: 5rem solid rgb(16, 16, 73);
    border-bottom: 5rem solid blue;
    border-left: 5rem solid rgb(51, 51, 252);
}

span:nth-child(3) {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 0;
    border-top: 5rem solid rgb(16, 16, 73);;
    border-right: 5rem solid  rgb(0, 0, 131);
    border-bottom: 5rem solid blue;
    border-left: 5rem solid rgb(0, 0, 131);
}

span:nth-child(4) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 5rem solid rgb(51, 51, 252);
    border-right: 5rem solid rgb(16, 16, 73);;
    border-bottom: 5rem solid blue;
    border-left: 5rem solid  rgb(0, 0, 131);
}