Um pequeno experimento com algumas propriedades da CSS 3. Para explorar um pouquinho do que se pode fazer com essas novas propriedades, eu tentei reproduzir o Triângulo de Penrose usando apenas CSS. Nada de imagens ou javascript, yep. Como eu não fiz nenhum cálculo realmente (só apliquei algumas propriedades de pixelarts isométricos), o triângulo não ficou lá realmente muito bom. Dá pra perceber que alguns dados foram forçados para baixo para poder encaixar.
Se você estiver usando um browser decente (ou seja, nada de IEcaxplorer ou outros dinossauros), ao invés de uma bagunça de caixas, você verá um Triângulo de Penrose bonitinho ali em cima. Para mim, o melhor navegador à renderizar o experimento foi o novo Opera 10.5. O Firefox renderiza bem também, mas há algumas falhinhas entre as bordas e o preenchimento dos círculos. No Webkit (Chrome e Safari), a renderização da border-radius com o transform fica realmente estranha, então eu resolvi tirar — se você está usando um desses para ver a página, verá quadradinhos ao invés dos círculos.
É bom notar que as transforms podem ser feitas no IEca através dos filtros. Embora o comportamento deles seja bem diferente do padrão CSS 3. Eu não tentei, mas se alguém se habilitar, eu gostaria de ver como fica.
Você pode dar um view-source nesta página ou baixar a package abaixo com os arquivos. Para todos os efeitos, qualquer código aqui está em Public Domain. Enjoy :3