Question

I would like to create div like this picture:

So far I created this:

<div style="width: 300px; height: 200px; left:20px; top: 40px;">
<div style="width: 300px; height: 20px; top: 0px; background-color: #76b900; border-radius: 3px; "/>

</div>

How I can add color gradient like the picture. And also how I can add 45 degree angle like the picture?

Answer 1

The idea is to use a pseudo element with the same gradient as the main element, but diagonally across, then rotate it 45 degrees:

h1 {
    background: linear-gradient(#5FA309, #3B8018);
    position: relative;
    line-height: 30px;
}

​h1:after {
    content: '';
    background: linear-gradient(top left, #5FA309, #3B8018);
    transform: rotate(45deg);
    position: absolute;
    top: 4px; right: -11px;
    width: 21px;
    height: 21px;
}​

Here’s a demo: http://codepen.io/JosephSilber/pen/bFfqn

P.S. Don’t forget vendor prefixes in production…