CSS
html, body {
height: 100%;
width: 100%;
background: #e74c3c;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.board {
height: 250px;
width: 250px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
border-radius: 50%;
border: 4px solid #222;
display: flex;
justify-content: center;
align-items: center;
}
.outer {
height: 160px;
width: 160px;
background: #f1c40f;
}
.center {
height: 140px;
width: 140px;
background: #fff;
}
.triangle {
position: absolute;
width: 0;
height: 0;
border-left: 66px solid transparent;
border-right: 106px solid transparent;
border-top: 42px solid #222;
}
.stroke-up {
top: 86px;
left: 52px;
transform: rotate(-36deg);
}
.stroke-down {
top: 130px;
left: 20px;
transform: rotate(-210deg);
}
.triangle-up {
position: absolute;
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 85px solid transparent;
border-top: 32px solid #f1c40f;
}
.triangle-up {
top: 92px;
left: 65px;
transform: rotate(-36deg);
}
.triangle-down {
position: absolute;
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 85px solid transparent;
border-top: 32px solid #f1c40f;
top: 133px;
left: 40px;
transform: rotate(-210deg);
}
