css3渐变SVG渐变

来源：互联网发布：开淘宝店怎么注册视频编辑：程序博客网时间：2024/04/30 22:13

分别使用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;}

效果图

0 0