Snow Crash Snow Crash - 5 months ago 29
CSS Question

Overlay trapezium shape on DIV

Trying to get this design using CSS.

enter image description here

The parts are as follows:


  1. has a background image

  2. is a trapezium with a transparent background with horizontal text



I've taken a look at Two-tone background split by diagonal line using css but am still a bit stumped. CSS is not a strong point!

Any suggestions?

Answer

as @markE mentioned a good way to achieve this is using skew

Use position:relative in .wrap and position:absolute in the parallelogram div to achieve the overlay effect (using the rgba in background property)

Note: this is a parallelogram, not a trapezium - this might help you on future searches

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