边框的背景渐变？答案

【问题标题】：Background gradient in border?边框的背景渐变？
【发布时间】：2014-12-29 14:23:26
【问题描述】：

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

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

【问题讨论】：

不清楚你在问什么。请添加更多详细信息。
如果你打开小提琴，你可以看到两个红色的div，那些是方形的div，但可见的只是一个三角形。我正在尝试将红色设置为渐变，而不影响透明边框。
如果不能解释，能否画出最终结果？
无法为边框添加渐变。你需要在这里svg。
这有点hacky但是jsfiddle.net/gno5295u/2

标签： css border gradient shape

【解决方案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>

【讨论】：

谢谢，这正是我想要的。 +1000000
@JoostMeijer - 不客气。 :)

【解决方案2】：

我为 div 添加了 background-gradient 并添加了伪元素来隐藏多余的空间

#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;
}

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

【讨论】：

对不起，你帮了我很大的忙。但这并不是真正帮助我的答案。不过谢谢。