html - 如何使用css形状创建具有响应性的平行四边形

Question

我正在一个网站上工作，我必须创建类似的东西，如下图所示。它应该是响应式的。图片链接

任何人都可以帮助我。

问候，

拉吉库马尔

标签： htmlcsscss-shapes

Answer 1

你应该使用transform: skew()：

.paralelogram {
  display: block;
  width: 200px;
  margin: auto;
  background: blue;
  color: white;
  transform: skewX(-30deg);
}
.paralelogram p {
    transform: skewX(30deg);
    padding: 5px 20px;
}

<div class="paralelogram"><p>lorem ipsum</p><div>