How work with degree or start and stop in linear-gradient CSS3

Tags: css3

Problem :

I'm trying to duplicate this button in CSS3:

this is mu CSS code:

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

so I get this:

as you can see the cut between the two colors doesn't start at the corners but rather in the center. So my question is how may I code it to duplicate the original image???

thanks in advance

I base my code using this site

---

Solution :

I create a white right triangle with the same height and width of the button, alpha level of 70% and place it as background image

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

that's all :-)