在 DIV 上叠加梯形形状

Question

尝试使用 CSS 实现此设计。

部分如下：

1. 有一个background image
2. 是一个梯形，带有透明的background，带有横向文本

我看过Two-tone background split by diagonal line using css，但还是有点难过。

CSS 不是强项！

有什么建议吗？

Answer 1

正如@markE 提到的，实现这一目标的好方法是使用skew

在.wrap中使用position:relative，在平行四边形div中使用position:absolute实现叠加效果（使用background属性中的rgba）

注意：这是一个平行四边形，而不是梯形 - 这可能会对您以后的搜索有所帮助

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.wrap {
  position: relative;
  border: 5px solid black;
  height: 500px;
  width: 100%;
  background: url("//lorempixel.com/1200/600")
}
.parallelogram {
  position: absolute;
  right: 0px;
  top: 100px;
  width: 350px;
  height: 250px;
  background: rgba(255, 255, 255, .5);
  border: solid black;
  border-width: 5px 0 5px 5px;
  transform: skew(0, -15deg);
}
span {
  display: block;
  transform: skew(0, 15deg);
  margin: 70px 30px 0;
}

<div class="wrap">
  <div class="parallelogram"><span>title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 </span>
  </div>
</div>