如何创建平行四边形div？

Question

我正在开展一个项目,我必须创建类似于下图中显示的内容.具体地说,带有文本的黄色平行四边形显示在红色矩形内部(我不需要这个红色矩形).如您所知,默认情况下div是矩形的

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

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

谢谢

PS:我不能使用图像作为背景因为,如果你做的窗户较小,背景不会跟随文字

Answer 1

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

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

<div></div>