Back to grey triangles

fofr · fofr · commit 1beee312a80c · 2012-11-24T20:25:27.000Z
* But keeping the shades which better illustrate the rotation
diff --git a/pyramid/css/experiment.css b/pyramid/css/experiment.css
@@ -48,25 +48,25 @@ text-align: center;
 }
 
 #pyramid > div:first-child  {
-border-color: transparent transparent transparent rgba(22, 22, 22, 0.6);
+border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
 -webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
 -moz-transform:    rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
 }
 
 #pyramid > div:nth-child(2) {
-border-color: transparent transparent transparent rgba(166, 22, 22, 0.6);
+border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
 -webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
 -moz-transform:    rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
 }
 
 #pyramid > div:nth-child(3) {
-border-color: transparent transparent transparent rgba(166, 22, 22, 0.9);
+border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
 -webkit-transform: rotateX(60deg) rotateY(19.5deg);
 -moz-transform:    rotateX(60deg) rotateY(19.5deg);
 }
 
 #pyramid > div:nth-child(4) {
-border-color: transparent transparent transparent rgba(166, 22, 22, 0.8);
+border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
 -webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
 -moz-transform:    rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
 }

Original file line number	Diff line number	Diff line change
`@@ -48,25 +48,25 @@ text-align: center;`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`#pyramid > div:first-child {`
`51`		`-border-color: transparent transparent transparent rgba(22, 22, 22, 0.6);`
	`51`	`+border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);`
`52`	`52`	`-webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);`
`53`	`53`	`-moz-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`#pyramid > div:nth-child(2) {`
`57`		`-border-color: transparent transparent transparent rgba(166, 22, 22, 0.6);`
	`57`	`+border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);`
`58`	`58`	`-webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);`
`59`	`59`	`-moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`#pyramid > div:nth-child(3) {`
`63`		`-border-color: transparent transparent transparent rgba(166, 22, 22, 0.9);`
	`63`	`+border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);`
`64`	`64`	`-webkit-transform: rotateX(60deg) rotateY(19.5deg);`
`65`	`65`	`-moz-transform: rotateX(60deg) rotateY(19.5deg);`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`#pyramid > div:nth-child(4) {`
`69`		`-border-color: transparent transparent transparent rgba(166, 22, 22, 0.8);`
	`69`	`+border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);`
`70`	`70`	`-webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);`
`71`	`71`	`-moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);`
`72`	`72`	`}`