css - 如何在线性渐变 CSS3 中使用度数或开始和停止

Question

我试图在 CSS3 中复制这个按钮:

这是 mu CSS 代码:

#banneroverlaping > a:link, #banneroverlaping > a:visited{
color: white;
padding: 5px 5px 5px 5px;
background: #FA733B;
background: -moz-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%, #FF501C 51%, #FF501C 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#FA733B), color-stop(50%,#FA733B), color-stop(51%,#FF501C), color-stop(100%,#FF501C));
background: -webkit-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
background: -o-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
background: -ms-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
background: linear-gradient(135deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
}

所以我明白了:

如您所见，两种颜色之间的切割不是从 Angular 开始，而是从中心开始。所以我的问题是我如何对其进行编码以复制原始图像？？？

提前致谢

我的代码基于 this site

Answer 1

我创建了一个与按钮高度和宽度相同、alpha 级别为 70% 的白色直 Angular 三 Angular 形并将其放置为背景图像

background: url(file:///home/juanpa/Public/a/img/Ontario.png) left no-repeat;