在DIV上叠加梯形形状

Question

尝试使用CSS获取此设计。

部分内容如下：

1. 有<?php $query = "SELECT * FROM final_report " ; ?>
2. 是一个带有水平文字的透明background image的梯形

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

CSS不是一个强项！

有什么建议吗？

Answer 1

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

使用position:relative中的.wrap和并行图position:absolute中的div来实现叠加效果（使用rgba属性中的background

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

＆＃13;

＆＃13;

*,
*::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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;