Испытание: щит Завтрамэна [31/31] 93%, прошу дать подсказку.

Курсы §24. Мастерская: декоративные эффекты. Часть 2
1

Здравствуйте! Какие только селекторы не пытался подставлять в конце, ничего не помогает :frowning:
Прошу дать небольшую подсказку, чтобы понять, в каком направлении думать.

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-logo,
.shield::after {
    border-radius: 50%;
}

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

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

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

selector {
    position: relative;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 82px;
    transform: translate(-41px, -20px);
}

selector,
selector {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 10px solid #ffffff;
    border-radius: 50% 50% 0;
    transform: rotate(-45deg);
}

selector {
    right: 0;
    left: auto;
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
}
2

Разобрался :slight_smile:

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::after,
.shield::before {
    border-radius: 50%;
}

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

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

.shield::after,
.shield::before {
    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::after,
.shield-logo::before {
    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::before {
    right: 0;
    left: auto;
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
}