How to make a parallelogram structure with shading effect in css

Question

I want to make a figure with shaded background color like this:

Can someone please help me with this?

Answer 1

CSS skew and gradient can solve this problem

#demo {
  -moz-transform: skew(-22deg, 0deg);
  -webkit-transform: skew(-22deg, 0deg);
  -o-transform: skew(-22deg, 0deg);
  -ms-transform: skew(-22deg, 0deg);
  transform: skew(-22deg, 0deg);
  editor/#a90329+1,
  a90329+47,
  aa3d48+47,
  aa3d48+100 */ background: #a90329;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#aa3d48', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  height: 100px;
}

<div id="demo">Demo</div>