css3渐变SVG渐变

最新推荐文章于 2025-05-17 11:36:39 发布

原创最新推荐文章于 2025-05-17 11:36:39 发布 · 置顶 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

前端综合同时被 3 个专栏收录

28 篇文章

订阅专栏

CSS

10 篇文章

订阅专栏

SVG

7 篇文章

订阅专栏

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

效果图