css3渐变SVG渐变

分别使用css3、svg实现的梯形渐变

html

css

.toLeft {
  margin-top:15px;
  width:300px;
  height: 15px;
  background:-webkit-linear-gradient(left,rgb(230,0,126), rgb(246,1,0));
  background:linear-gradient(to left,rgb(230,0,126), rgb(246,1,0));
  position: relative;
}
.right{
    position:absolute;
    top:0px;
    right:0px;
    width: 0;
    height: 0;
      border-bottom: 20px solid #fff;
      border-left: 20px solid transparent;
}
.toLeft1 {
  margin-top:15px;
  width:300px;
  height: 15px;
  background:-webkit-linear-gradient(left, rgb(231,153,5),rgb(230,0,126));
  background:linear-gradient(to left, rgb(231,153,5),rgb(230,0,126));
  position: relative;
}
.toLeft2{

  width:300px;
  height: 15px;
  background:-webkit-linear-gradient(left, rgba(103,103,103,0),rgba(103,103,103,1));
  background:linear-gradient(to left, rgba(103,103,103,0),rgba(103,103,103,1));
  position: relative;
}

效果图