分别使用css3、svg实现的梯形渐变
html
<!DOCTYPE html> <html> <head> </head> <body> <div class="toLeft2"> <div class="right"></div> </div> <div class="toLeft"> <div class="right"></div> </div> <div class="toLeft1"> <div class="right"></div> </div> <svg height="150" width="400"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(246,1,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(230,0,126);stop-opacity:1" /> </linearGradient> <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(230,0,126);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(231,153,5);stop-opacity:1" /> </linearGradient> </defs> <g> <path d="M280 30 H20 V15 H300 Z" stroke-width="1" fill="url(#grad1)" /> <path d="M180 60 H20 V45 H200 Z" stroke-width="1" fill="url(#grad2)" /> </g> </svg> </body> </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; }效果图
