100% Испытание: щит Завтрамэна [31/31]

[le_fay]

html,
body {
    width: 570px;
    margin: 0;
    padding: 0;
    color: #333333;
    background-color: #f5f5f5;
}

main {
    position: relative;
    display: block;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.shield {
    position: relative;
    top: 5%;
    width: 90%;
    height: 90%;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 2px 3px #cccccc;
}

.shield,
.shield::before,
.shield::after {
    border-radius: 50%;
}

.shield::before {
    width: 75%;
    height: 75%;
    background-color: #0039a6;
}

.shield::after {
    width: 50%;
    height: 50%;
    background-color: #d52b1e;
}

.shield::before,
.shield::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.shield-logo {
    position: relative;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 82px;
    transform: translate(-41px, -20px);
}
.shield-logo::before,
.shield-logo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 10px solid #ffffff;
    border-radius: 50% 50% 0;
    transform: rotate(-45deg);
}
.shield-logo::after {
    right: 0;
    left: auto;
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
}

[LoG]

затупил тем, что поставил
.shield::after {
width: 75%;
height: 75%;
background-color: #0039a6;
}

.shield::before {
width: 50%;
height: 50%;
background-color: #d52b1e;
}

получилось так, что синяя часть закрывает красную