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);
}