css line with slope in the middle

Question

in CSS , how do i achieve the following:

My attempt:

<div id="slope"></div>

#slope{
    width: 100px;
    border-top: 20px solid #000;
    border-right: 90px solid #fff;
}

But then i'm stuck with how to make the thing look like a line instead of a solid

I've tried raphael JS, it works but i need to incorporate this element with jQuery's animation, raphael uses SVG and doesn't seems to play well with jQuery

css3/html5 is ok, as long as safari/chrome supports it then it's fine

and i need to be able to modify where the slope section is placed.(Ex: move the slope section in the middle a bit to the left).

Answer 1

Given the following HTML:

<span class="left"></span><span class="slope"></span><span class="right"></span>​

The following CSS does as you wish, the 'slope' being moved left, or right, according to the width of the .left element:

span {
    min-height: 1em; /* to give a common height to all spans */
    display: inline-block; /* to enable the spans to take a specified dimension */
}
span.left {
    position: relative; /* to allow for the element to be shifted slightly */
    top: 0.15em; /* to join the border with the slope of the next element */
    width: 5em;
    border-top: 0.15em solid #000;
}

span.right {
    width: 10em;
    border-bottom: 0.15em solid #000;
}

span.slope {
    position: relative; /* to allow the generated content to be 
                           positioned relative to this one */
    background-color: #000; /* the 'slope' color */
    overflow: hidden;
    width: 1em; /* affects the 'width' of the slope */
}

span.slope::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    border: 0.45em solid #fff; /* masks the background-color of the span */
    border-top-color: transparent; /* allows the ::after element's 
                                      borders to show through */
    border-right-color: transparent;
}

span.slope::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: 0.45em solid #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

​JS Fiddle demo.

JS Fiddle demo, with a broader 'stroke' for the slope.

It's worth noting that, while this is clearly possible (in browsers that support pseudo-elements), it's an overly-complex approach and, if at all possible, the canvas or transform-based solutions should probably be used instead).

---

Updated in response to comment from OP (below):

i've changed the span{min-height: 1em} to a higher value but the slope doesn't seems to adjust according to height.... or am i doing something wrong?

Changing the height of the span elements should work, but you'll get an odd result; the following CSS change (the remaing CSS untouched):

span {
    min-height: 1em; /* to give a common height to all spans */
    display: inline-block; /* to enable the spans to take a specified dimension */
}

Leads to this:

This may seem odd, at first, but if you remember that we were using the borders of the generated content to hide the background-colour of the .slope element it makes more sense, particularly if we assign alternative colours to those borders:

span {
    min-height: 1em;
    display: inline-block;
}
span.slope::before {
    /* everything else untouched */
    border: 0.45em solid #f00;
}
span.slope::after{
    border: 0.45em solid #f90;
}

It becomes apparent, at this point, that to maintain the 'width' of the slope we also need to increase the width of the borders of the generated content:

span {
    min-height: 1em;
    display: inline-block;
}
span.slope::before {
    /* everything else untouched */
    border: 0.95em solid #f00;
}
span.slope::after{
    border: 0.95em solid #f90;
}

Which results in:

.

Removing the easily-visible colours, then, gives us the slightly tidier, and larger:

.