Template:RadarChart/Styles.css

From JoJoSS Wiki
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}
}