css - 边框中的背景渐变？

Question

我正在尝试为边框顶部设置背景渐变，但我不希望这影响我的其他边框。由于我使用边框来创建三 Angular 形，因此其他边框必须是透明的。

fiddle :http://jsfiddle.net/gno5295u/

<div id="logo">
    <div id="left-s"></div>
    <div id="right-s"></div>
</div>

#logo {
    margin: 0px;
    padding: 0px;
    height: 200px;
    width: 200px;
    background: #000000;
    display: block;
}
#left-s {
    position: absolute;
    top: 20px;
    left: 75px;
    height: 0;
    width: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
#right-s {
    position: absolute;
    top: 80px;
    left: 25px;
    height: 0;
    width: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

Answer 1

这是一个 svg 等同于 linearGradient 而不是单一颜色。

<svg width="200" height="200">
  <defs>
    <linearGradient gradientUnits="userSpaceOnUse" id="gradient" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0%" stop-color="red" stop-opacity="1" />
      <stop offset="100%" stop-color="yellow" stop-opacity="1" />
    </linearGradient>
  </defs>
  <path d="M0,0 L200,0 L200,200 L 0,200z" />
  <path d="M75,20 h100 l-100,100" fill="url(#gradient)" />
  <path d="M125,80 v100 h-100z" fill="url(#gradient)" />
</svg>