我正在尝试为边框顶部设置背景渐变,但我不希望这影响我的其他边框。由于我使用边框来创建三 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;
}
最佳答案
这是一个 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>
关于css - 边框中的背景渐变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27690648/