HTML元素定位

Question

我试着用HTML和CSS重新创建一个杂志封面，但我碰到了一块石头。

每当我尝试旋转文本区域并对齐它最左边，我只得到顶部的角被削减，但我想要更多。

这是我为元素使用的CSS：

textarea {
  transform: rotate(-10deg);
  height: 740px;
  width: 520px;
}

这是小提琴

这是封面

Answer 1

标头定位

更改元素的z-index，将其放在其他元素之上。

z-index : 10;

请参阅这把小提琴

Textarea定位

你想要削减更多的文本区域。它其实就像放一个

margin-left: -100px;

Answer 2

Rotate()旋转其内容，保留其width和height。

您需要添加额外的padding或margin来显示所有内容。