html5 / css3自定义形状按钮，有多种颜色

Question

我需要帮助附加按钮css。 任何人都可以帮助我做css或指导我吗？

Answer 1

你可以在SVG中使用mask和linearGradient的组合作为CSS背景图像来实现这样的效果。

它的工作原理如下

您可以在SVG中使用100％的宽度和高度。但不幸的是，笔划延伸到形状之外，所以如果你划出100％的直线，笔划将部分地位于视口之外。这看起来不太好。诀窍是有一个第二个矩形作为第一个矩形的掩模，它具有一个略小的行程宽度，有效地切除了视口之外的部分。 现在，您可以使用渐变来描绘矩形以获得所需的结果。

＆＃13;

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg">
  <linearGradient x1="0" y1="1" x2="1" y2="1" id="lg1">
    <stop offset="0" stop-color="red" />
    <stop offset="0.2" stop-color="red" />
    <stop offset="0.2" stop-color="blue" />
    <stop offset="0.8" stop-color="blue" />
    <stop offset="0.8" stop-color="green" />
    <stop offset="1" stop-color="green" />
  </linearGradient>

  <mask id="m1">
    <rect x="0" y="0" width="100%" height="100%" rx="40" ry="40" fill="white" stroke="black" stroke-width="20" />
  </mask>

  <rect stroke="url(#lg1)" stroke-width="40" mask="url(#m1)" x="0" y="0" width="100%" height="100%" rx="40" ry="40" fill="none" />

</svg>

＆＃13;

＆＃13;

＆＃13;