这样的样式怎么实现？_html/css_WEB-ITnose

像这样的样式怎么实现？是从后台动态取出，每个方块都有一个栏目显示，像这样排列

回复讨论(解决方案)

css3还是css2?

见意去看看：CSS3 transform

transform:rotate(90deg);
-ms-transform:rotate(90deg); /* Internet Explorer */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */

css3旋转45度
transform:rotate(45deg);

css3旋转45度
transform:rotate(45deg);

旋转后不要紧凑的排在一起，而是有空白

     无标题文档  div{ background:#62aff3; width:400px; height:400px; padding:30px;}div ul{list-style:none;margin:0;padding:0}div ul li{float:left; width:100px; height:100px; border:2px solid #7bcbff; margin:0 22px; border-radius:10px; 	transform: rotate(45deg);	-ms-transform: rotate(45deg);		/* IE 9 */	-webkit-transform: rotate(45deg);	/* Safari and Chrome */	-o-transform: rotate(45deg);		/* Opera */	-moz-transform: rotate(45deg);		/* Firefox */	background:#004594;	background-image:-webkit-linear-gradient(to top right, #004594, #0186fc,#025cb2);	background-image:linear-gradient(to bottom right, #004594, #0186fc,#025cb2);}div ul li:nth-last-child(4n){margin-left:97px;}   


      
查看更多关于这样的样式怎么实现？_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114389