边境背景渐变？

Question

我正在尝试将背景渐变设置为border-top，但我不希望这会影响我的其他边框。由于我使用边框来创建三角形，因此另一个边框必须是透明的。

小提琴：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而不是单一颜色。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我为div添加了背景渐变，并添加了伪元素来隐藏额外的空间

＆＃13;

＆＃13;

#logo {
  margin: 0px;
  padding: 0px;
  height: 200px;
  width: 200px;
  background: #000000;
  display: inline-block;
  position: relative;
}
#left-s {
  width: 80px;
  height: 80px;
  position: absolute;
  background: transparent;
  overflow: hidden;
  top: 45px;
  right: 70px;
}
#right-s {
  width: 80px;
  height: 80px;
  position: absolute;
  background: transparent;
  overflow: hidden;
  bottom: 45px;
  left: 70px;
}
#left-s:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 150%;
  background: -webkit-linear-gradient(top, rgba(255, 50, 50, 1) 1%, rgba(125, 185, 232, 1) 100%);
  transform: rotate(45deg);
  transform-origin: top right;
}
#right-s:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 150%;
  background: -webkit-linear-gradient(top, rgba(255, 50, 50, 1) 1%, rgba(125, 185, 232, 1) 100%);
  transform: rotate(45deg);
  transform-origin: top left;
  left: 80px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;