I need to create two columns. Variable-length text on the left and an image on the right.

I tried clip-path but no luck.

Thank you jval

CodePudding user response：

clip-path can do it. Here is an overview:

.box {
  display: grid;
  grid-auto-flow: column;
  height: 300px;
}

.box div:first-child {
  background: blue;
  clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 calc(100%   50px)); 
  box-shadow:0 0 0 50px blue;
}

.box div:last-child {
  background: red;
}

<div >
  <div></div>
  <div></div>
</div>