我一直在努力找出实现这一目标的最佳方法,但却无法想到任何事情,也没有在大型互联网上找到太多。
但这是我想要达到的目标;列表并在每个<li>
上旋转-45deg
li {
width: 160px;
height: 160px;
border: solid 1px #828080;
display: inline-block;
padding: 0;
float: left;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
position: relative;
margin: 33px;
}
应该看起来像这样的东西(希望你能得到这个想法,我的糟糕的Photoshop技能)
这里有一个简单的JSfiddle:
答案 0 :(得分:3)
rotate
继续ul
并从margin
移除li
:
.picker {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
li {
width: 160px;
height: 160px;
border: solid 1px #828080;
display: inline-block;
padding: 0;
float: left;
position: relative;
background-color: red;
}