Template:RadarChart/Styles.css
Jump to navigation
Jump to search
/* Downloaded from https://www.codeseek.co/hikarievo/css-hexagon-radar-chart-css-only-KaowyW */
.RadarContainerTop {
margin: 20px;
}
.RadarContainer {
position: relative;
border-radius: 100%;
}
.RadarContainerTop, .RadarContainer {
height: 380px;
width: 380px;
}
.rankpos {
font-size: 28pt;
position: absolute;
width: 50px;
text-align: center;
}
.tri1 {
border-style: solid;
border-color: transparent transparent rgba(255, 207, 95, 0.47843137254901963) rgba(255, 207, 95, 0.47843137254901963);
transform: matrix(0.8660254, -0.5, 0, 1, 0, 0);
transform-origin: left bottom;
position: absolute;
bottom: 50%;
left: 50%;
animation: grow 1.5s ease-out;
}
.tri2 {
border-style: solid;
border-color: transparent transparent rgba(255, 207, 95, 0.47843137254901963) rgba(255, 207, 95, 0.47843137254901963);
transform: matrix(0.8660254, 0.5, -0.8660254, 0.5, 0, 0);
transform-origin: left bottom;
position: absolute;
bottom: 50%;
left: 50%;
animation: grow 1.5s ease-out;
}
.tri3 {
border-style: solid;
border-color: transparent transparent rgba(255, 207, 95, 0.47843137254901963) rgba(255, 207, 95, 0.47843137254901963);
transform: matrix(0, 1, -0.8660254, -0.5, 0, 0);
transform-origin: left bottom;
position: absolute;
bottom: 50%;
left: 50%;
animation: grow 1.5s ease-out;
}
.tri4 {
border-style: solid;
border-color: transparent transparent rgba(255, 207, 95, 0.47843137254901963) rgba(255, 207, 95, 0.47843137254901963);
transform: matrix(-0.8660254, 0.5, 0, -1, 0, 0);
transform-origin: left bottom;
position: absolute;
bottom: 50%;
left: 50%;
animation: grow 1.5s ease-out;
}
.tri5 {
border-style: solid;
border-color: transparent transparent rgba(255, 207, 95, 0.47843137254901963) rgba(255, 207, 95, 0.47843137254901963);
transform: matrix(-0.8660254, -0.5, 0.8660254, -0.5, 0, 0);
transform-origin: left bottom;
position: absolute;
bottom: 50%;
left: 50%;
animation: grow 1.5s ease-out;
}
.tri6 {
border-style: solid;
border-color: transparent transparent rgba(255, 207, 95, 0.47843137254901963) rgba(255, 207, 95, 0.47843137254901963);
transform: matrix(0, -1, 0.8660254, 0.5, 0, 0);
transform-origin: left bottom;
position: absolute;
bottom: 50%;
left: 50%;
animation: grow 1.5s ease-out;
}
@keyframes grow {
0% {border-width: 0px}
}