CSS转换元素的建议

Question

Stackoverflow不允许发布图片，因为我需要10次回复才能发布图片，这是我为什么发布链接的原因

我概述了我的想法，我想创建类似于此。 http://themesand.com/link.jpg

你能给我建议吗。 我尝试用css创建它，比如编写类似于此的代码。

首先创建div class='main'并在main div class='box'添加div class='box'并编写css旋转box元素

或者还有其他js插件来实现类似的效果？

你有什么建议我的？

Answer 1

变换：旋转（45度）; 会做的

.box {
  border:1px dashed black;
  width:100px;
  height:100px;
  position:relative;
  -webkit-transform:rotate(45deg);
  overflow:hidden;
}

我用粗略的解决方案制作了一支笔： http : //codepen.io/anon/pen/kwifj

如果您希望在这些框中包含某些内容，则必须将其旋转回来。 另一个解决方案是在旋转后的元素上进行绝对定位和渲染文本。

Answer 2

您可以使用CSS转换属性来完成

div.box{
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg); /* Standard syntax */
}

调整旋转度数以匹配您的图像，并使用div的数量与框的数量。