css - 如何创建平行四边形div？

Question

这个问题在这里已经有了答案:





draw angular side / parallelogram using CSS

(3 个回答)


4年前关闭。




我正在做一个元素，我必须创建类似于下图所示的内容。具体来说，带有文本的黄色平行四边形显示在红色矩形内(我不需要这个红色矩形)。如您所知，默认情况下 div 是矩形的



那么我的问题是，如何创建 3 个平行四边形 div 或类似的东西？

任何建议或指导将不胜感激

谢谢

PS:我不能使用图像作为背景，因为如果你把 window 缩小，背景就不会跟在文字后面

Answer 1

您可以使用负 SkewX 变换来获得所需的效果:

div {
  margin: 20px;
  width: 200px;
  height: 100px;
  display: inline-block;
  background: yellow;    
  border: 1px solid black;
  transform: skewX(-10deg);
  }

<div></div>