在 DIV 上叠加梯形

Question

尝试使用 CSS 获得此设计。

部分如下：

有一个background image
是一个透明的梯形 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>

在 DIV 上叠加梯形

Overlay trapezium shape on DIV

html

css

css-shapes