Clash Royale CLAN TAG#URR8PPP

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

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

2 Answers
2

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;


this gradient works for a square box:

background-image: -webkit-linear-gradient(4% 0%, rgb(62,203,103) 48%, rgb(93,244,134) 57%);

background-image: -webkit-gradient(
linear,
4% 0%,
left bottom,
color-stop(0.48, rgb(62,203,103)),
color-stop(0.57, rgb(93,244,134))
);


now xStart is 4% and yStart=0%
you can change xStart to move the gradient anti-clockwise.
the 0.48 or 48% is the color on the top (in this css the deep green) and 57% is the light green. you can adjust that accordingly....
if the ratio of the color-stops are 1, i.e. 57% and 57% for example, then you will have a line seperating the two gradients. and if its not, depending on which one is larger, it will try to blend into the one with lower value

xStart is 4% and yStart=0%

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.