Overlay trapezium shape on DIV

Question

Trying to get this design using CSS.

The parts are as follows:

has a background image
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?

Kind of looks like a skewed div `#theDiv{ border:3px solid black; transform: skew(0,-10deg); } with span-text absolutely positioned over #theDiv. — markE, Jul 01 '16 at 00:41
Have a look at this site: http://www.oca.nz/ it's using this a lot — Wim Mertens, Jul 01 '16 at 01:53
Quick demo using just two elements: [here](https://jsfiddle.net/hqhmx78e/) — jbutler483, Jul 01 '16 at 11:01

dippas · Accepted Answer · 2016-07-01T01:25:21.957

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>

Overlay trapezium shape on DIV

1 Answers1