如何创建平行四边形div？

Question

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

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

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

由于

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>    

Answer 2

weinde几乎拥有它，但有两个问题：你需要设置显示内联块，并且div的内容将会偏斜。一个非常懒惰的方法是：

.para {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
display: inline-block;
vertical-align: top;
}
.unskew {
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}

<div class="para"><div class="unskew">stuff</div></div>
<div class="para">stuff 2</div>

我觉得这个不受欢迎的div是不必要的。

您也可以尝试使用css3背景渐变。例如，将渐变应用于位于3个元素后面的父div。 http://www.quirksmode.org/css/images/angles.html

Answer 3

尝试这种CSS样式：

wordlist = []

for i in range(10):
    wordlist.append(input("Type a word: ").lower().strip())

letter = input("Choose a letter: ").lower().strip()

new_wordlist = [word for word in wordlist if not word.startswith(letter)]

print(new_wordlist)

在#parallelogram中，您可以选择自己的班级名称......