Question

我有点困惑：我想创建一些平行四边形并将文本放入其中。但是当我将文本放入其中时，文本与平行四边形的形状对齐。这是我尝试过的

.parallelogram {
  width: 130px;
  height: 75px;
  background: blue;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
}

<div class="parallelogram">
  <div>
    <p>Projects</p>
  </div>
</div>

正如你所看到的，我在一个类中创建了一个Div，它创建了平行四边形。现在，如果我尝试将另一个p标签作为子标签放入包含该形状的div标签中，我的文本通常看起来不正常。有没有办法删除孩子的inerhit？所以我的文字看起来很正常，还是有更好的方法？感谢

Answer 1

.parallelogram {
  width: 130px;
  height: 75px;
  background: blue;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
}
.parallelogram p{
  transform: skew(-20deg);
}

<div class="parallelogram">
  <div>
    <p>Projects</p>
  </div>
</div>

.parallelogram p{
  transform: skew(-20deg);
}

Answer 2

我认为你尝试这样的事情：

＆＃13;

.parallelogram {
	width: 300px;
	height: 100px;
	background-color: green;
	transform: skewX(30deg);
	transform-origin: top;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.parallelogram > span {
	transform: skewX(-30deg);
}

＆＃13;

<div class="parallelogram">
    <span>Projects</span>
</div>

＆＃13;

如何将文本正常变为扭曲的形状（parallelogramm）？

2 个答案: