Create a shape with three vertical lines (stripes)

Question

How to create the 3 vertical lines as in the following image using CSS?

Answer 1

This is pretty easy to create with linear-gradient background images and we don't need more than one div element to create this with gradients. All we need is a couple of gradient images.

Below is an explanation of how the shape was achieved:

• One linear gradient image which is 85% the size of the container in the X-axis and 75% the size of the container in the Y-axis is used to create the large white portion and it is positioned on left of the container.
• One more linear gradient image which is 15% of the size of the container in X-axis and 15% of the container's size in Y-axis is used to create the three stripes at the end. The stripes are created by splitting the gradient into colored and transparent portions. The colored portions are sized equally to produce a stripe like effect.

Note: The third bar in the image in question seems to be a little lower than the others, I am assuming this to be an error in the image. If it is not, it could still be achieved with the below approach.

body {
  background: yellow;
}
.shape {
  height: 100px;
  width: 400px;
  transform: skew(-30deg);
  transform-origin: left bottom;
  background-image: linear-gradient(to left, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 33%, rgba(255,255,255,0.75) 33%, rgba(255,255,255,0.5) 60%, transparent 60%, transparent 66%, rgba(255,255,255,1) 66%, rgba(255,255,255,0.75) 93%, transparent 93%), linear-gradient(white, white);
  background-size: 15% 100%, 85% 75%;
  background-position: 100% 100%, 0% 0%;
  background-repeat: no-repeat;
}

<div class='shape'></div>

---

You could also make use of SVG path elements to create this shape.

.shape {
  position: relative;
  height: 100px;
  width: 300px;
}
.shape svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
.shape svg path#white-bar {
  fill: rgba(255, 255, 255, 1);
}
.shape svg path#translucent-bar-1 {
  fill: rgba(255, 255, 255, 0.75);
}
.shape svg path#translucent-bar-2 {
  fill: rgba(255, 255, 255, 0.5);
}
body {
  background: yellow;
}

<div class='shape'>
  <svg viewBox='0 0 300 100'>
    <path d='M0,75 25,0 240,0, 221.5,75z M245,0 220,100 235,100 260,0' id='white-bar' />
    <path d='M265,0 240,100 255,100 280,0' id='translucent-bar-1' />
    <path d='M285,0 260,100 275,100 300,0' id='translucent-bar-2' />
  </svg>
</div>

^{Note: It may well be possible to create this using a single path element and an angled gradient fill but I am not that good with SVG.}