Question

Stackoverflow不允许发布图片，因为我需要10个代表来发布图片，因为我发布链接

我概述了我的想法，我想创建与此相似的内容。 http://themesand.com/link.jpg

你可以给我一些建议。我尝试使用css创建它，例如编写类似于此的代码。

首先创建div class='main' 并在div class='box'内添加main并编写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的数量。

CSS转换元素的建议

2 个答案: