CSS3 - divs one on each other, borders, triangles - css

Question

I'm in trouble trying to do this :
I managed to do something like this :
display: table-cell;
vertical-align: middle;
background: rgb(245,245,245); /* Old browsers */
background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
for the main container of text, and :
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 40px solid #FEEDDD;
display: inline-block;
to do the triangle. I would then place the circle with the number in absolute position inside of it.
But can't figure out how I would do for the triangle "border" to be gradient like the other div, nor giving it a white outer border...
Thanks ahead !

Answer 1

It's definitely possible.
I created not so long ago a back button with a gradient arrow. See this fiddle
So just change the orientation, the colors and resize it to what you want but you've got the idea here I guess.
HTML:
<button>Rejoignez le groupe</button>
CSS:
button {
position: relative;
display: inline-block;
border: 1px solid #555555;
margin: 0;
font-size: 12px;
color: inherit;
cursor: pointer;
height: 30px;
padding: 0 10px;
margin-right: 10px;
font-weight: bold;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #888888));
background: -webkit-linear-gradient(top, #eeeeee, #888888);
background: -moz-linear-gradient(top, #eeeeee, #888888);
background: -o-linear-gradient(top, #eeeeee, #888888);
background: linear-gradient(top, #eeeeee, #888888);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
}
button:after {
clip: rect(14px, 14px, 28px, 1px);
-webkit-transform: skewX(-35deg);
-moz-transform: skewX(-35deg);
-ms-transform: skewX(-35deg);
-o-transform: skewX(-35deg);
transform: skewX(-35deg);
content: "";
top: 0;
position: absolute;
height: 100%;
width: 8%;
right: -10px;
border-right: inherit;
background: inherit;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
box-shadow: inherit;
}
button:before{
clip: rect(1px, 14px, 14px, 1px);
background: red;
-webkit-transform: skewX(35deg);
-moz-transform: skewX(35deg);
-ms-transform: skewX(35deg);
-o-transform: skewX(35deg);
transform: skewX(35deg);
content: "";
top: 0;
position: absolute;
height: 100%;
width: 8%;
right: -10px;
border-right: inherit;
background: inherit;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
box-shadow: inherit;
}
Tell me if it's too confusing and need some guidance to change orientation, size and colors.

Answer 2

while you probably can manage to do something like that and still maintain a decent fall-backs across the ranges of browsers with successful results... i expect your going to pull out a good chunk of your hair while trying. my suggestion would be to get a few background images made up in Photoshop and break those items up into three different elements
an element for the transparent white circle that can contain the
step #
an element with class for the completed steps to apply the orange gradient background
another element with separate class for the gray gradient
doing things this way you can keep all of your elements "square" without having to worry about support for triangular or circle elements. and just overlay your text in the appropriate places...
i know this might not be exactly what your asking for the css3 way to accomplish everything, but i believe doing things this way allows you to keep it simple & lean