How to add gradient to borders

Question

I was wondering if it is possible to add gradients to the upper border without affecting the borders on the right or the borders on the left, which in this case are transparent. I tried adding a gradient color, but that would affect the borders on the left and the borders on the right im, trying to allow the border on the left and right to be transparent.

#borderone {
        border-top: 33px solid #354658;
        border-left: 33px solid transparent;
        border-right: 33px solid transparent;
        margin: 0 auto;
        min-width: 1277px;
    }
    <div id='borderone'></div>

as you can see, this is what I want it to do, although I need a gradient background color instead of a solid dark blue http://jsfiddle.net/EHELN/

Answer 1

You can get this effect using the background for the gradient, and 2 pseudo-elements on the left and right to get oblique angles

 .test {
    border-left: 33px solid transparent;
    border-right: 33px solid transparent;
    height: 33px;
    background: linear-gradient(90deg, black, blue);
    margin: 0 auto;
    min-width: 42px;
    background-clip: content-box;
    position: relative;
}

.test:before, .test:after {
    content: '';
    position: absolute;
    width: 33px;
    height: 100%;
}

.test:before {
    background: linear-gradient(45deg, transparent 50%, black 50%);
    right: 100%;
}

.test:after {
    background: linear-gradient(315deg, transparent 50%, blue 50%);
    left: 100%;
}

demonstration

, . ( webkit)

 .test {
    border-left: 33px solid transparent;
    border-right: 33px solid transparent;
    height: 33px;
    background: linear-gradient(0deg, black, red);
    margin: 0 auto;
    min-width: 42px;
    background-clip: content-box;
    position: relative;
}

.test:before, .test:after {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    bottom: 0px;
}

.test:before {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: bottom right;
    background: linear-gradient(-45deg, black 0, red 32px, transparent 32px);
    right: 100%;
}

.test:after {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: bottom left;
    background: linear-gradient(45deg, black 0, red 32px, transparent 32px);
    left: 100%;
}

demo 2

Answer 2

: http://css-tricks.com/examples/GradientBorder/

.

:

 #borderone:first-child:before {
    content:'';
    position:absolute;
    width:100%;
    height:4px;
    background:linear-gradient(to left, #354658, #9EBBDA);
    top:-33px;
    left:-5;
}

before first-child CSS .

top(in pseudo selector) = -border height = -33 px 

FIDDLE: http://jsfiddle.net/abdennour/EHELN/2/

Answer 3

, bg: DEMO

: : DEMO

#borderone {
  position:relative;
  padding:33px 33px 0;/* well this is just like transparent borders :) */
  margin: 0 auto;
  height:100px;
  background:linear-gradient(
    to bottom, 
    #354658, 
    #9EBBDA 33px, 
    transparent 33px
  );
}

Answer 4

http://www.colorzilla.com/gradient-editor/

, , , , .