12,782
edits
No edit summary |
No edit summary |
||
| Line 143: | Line 143: | ||
bottom:-20px; /* value = - border-top-width - border-bottom-width */ | bottom:-20px; /* value = - border-top-width - border-bottom-width */ | ||
left:50px; /* controls horizontal position */ | left:50px; /* controls horizontal position */ | ||
border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ | |||
border-style:solid; | |||
border-color:#075698 transparent; | |||
/* reduce the damage in FF3.0 */ | |||
display:block; | |||
width:0; | |||
} | |||
.triangle-left { | |||
position:relative; | |||
padding:15px; | |||
margin:1em 0 3em; | |||
color:#fff; | |||
background:#075698; /* default background for browsers without gradient support */ | |||
/* css3 */ | |||
background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698)); | |||
background:-moz-linear-gradient(#2e88c4, #075698); | |||
background:-o-linear-gradient(#2e88c4, #075698); | |||
background:linear-gradient(#2e88c4, #075698); | |||
-webkit-border-radius:10px; | |||
-moz-border-radius:10px; | |||
border-radius:10px; | |||
} | |||
.triangle-left:after { | |||
content:""; | |||
position:absolute; | |||
bottom:-20px; /* value = - border-top-width - border-bottom-width */ | |||
right:50px; /* controls horizontal position */ | |||
border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ | border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ | ||
border-style:solid; | border-style:solid; | ||