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


Tags: css3

Problem :

I'm trying to duplicate this button in CSS3: Orange button

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:

Orange button 2

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 :-)


    CSS Howto..

    How to style xml file? from xml to html using xslt and style that html using css [closed]

    Navigation Menu That Shows/Hides On Rollover and Click

    CSS question: How to fix several rendering issues on http://www.fareham.ac.uk

    how to read the following css class

    How can I fit images in full height columns in Bootstrap?

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    Bootstrap select dropdown showing selected option above the control

    I can't figure out how to stop the margin-top from making my child div overflow its parent

    How to have anchors to the side of the page? [closed]

    How to change the Size of the ListBox of the datePicker in GWT?

    How to get list of Css class use in the HTML file?

    How do I wrap several buttons inside a TD element

    How to force Jade not to indent block tag?

    How do I prevent sliced images in the CSS background from sitting on each other?

    How to center text horizontally and vertically within box element? [duplicate]

    How to add CSS to ASP.NET site with WebOptimization and Bundling

    How do i shift the text in twitter bootstrap navbar to center?

    How to make a div fade on hover?

    How do i make the header/footer extend width-wise to fit the screen, and the main content extend height-wise to fit the screen?

    how do i change button/image onclick to active state?

    how to combine multiple css class selectors for jquery buttonset?

    How to have a sidebar on the right in a responsive page with maximum width?

    How to customize bootstrap fixed navbar-default so that li elements align downward?

    CSS - How to float correctly into pseudocolumns

    How to make a header that changes position (like Pinterest)

    How to generate regular CSS file from SASS?

    How can I fill the remaining space when dealing with an inline ul?

    How to avoid CSS interference in an HTML page

    how to give style to the selected option in html

    How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar