CODEWITHSUNDEEP
cssbordergradient
Jeremy Belolo
Jeremy Belolo

Reputation: 4539

CSS3 - divs one on each other, borders, triangles

I'm in trouble trying to do this :

see 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 !

Upvotes: 0

Views: 223

Answers (2)

thomasstephn
thomasstephn

Reputation: 3835

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.

Upvotes: 1

Joe
Joe

Reputation: 2105

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

  1. an element for the transparent white circle that can contain the step #

  2. an element with class for the completed steps to apply the orange gradient background

  3. 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

Upvotes: 0

Related Questions