HTML CSS examples for CSS Animation:Transform
CSS Transform square into thinner rhombus
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .align_rhombus {<!--from w w w . j ava2 s .c o m--> position:fixed; left:51%; top:51%; margin-left:-321px; margin-top:-301px; } .rhombus { width:0; height:0; position:relative; margin:-61px 0 0 61px; border-bottom:361px solid Chartreuse; border-left:241px solid yellow; border-right:241px solid blue; z-index:3; } .rhombus:before { content:""; width:0; height:0; position:absolute; top:361px; left:-241px; border-top:361px solid pink; border-left:241px solid OrangeRed; border-right:241px solid grey; z-index:3; } </style> </head> <body> <div class="align_rhombus"> <div class="rhombus"></div> </div> </body> </html>