How to create div with angle

Question

I would like to create div like this picture:

enter image description here

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?

If you don't have to support old IE, this can be done in CSS alone. Does that suit you? — Joseph Silber, Nov 02 '12 at 14:31
Sure. I was messing around on jsFiddle, but it was painfully slow, so I switched to codepen. I added my solution below... — Joseph Silber, Nov 02 '12 at 15:08

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

I think that you would need 2 divs to accomplish this using just css.

One as a block with the text and on the right side you should float a div and apply a similar style to this:

How do CSS triangles work?

I would personally consider images.

edited May 23 '17 at 12:07

Community

1
1

answered Nov 02 '12 at 14:30

thedev

2,816
8
34
47

score 1 · Answer 2 · answered Nov 02 '12 at 14:36

1

You can either use 2 divs, or you can use an :after pseudo-element with an image of the arrow point alone.

EDIT: Come to think of it, using 2 skewed divs would also require you to use a :before pseudo-element with the image of the arrow point.

answered Nov 02 '12 at 14:36

Jules

14,200
13
56
101

Joseph Silber · Accepted Answer · 2012-11-02T15:02:43.403

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

edited Nov 02 '12 at 15:02

answered Nov 02 '12 at 14:45

Joseph Silber

214,931
59
362
292

No, but Firefox 16 should be able to display that properly, at least according to – Jules Nov 03 '12 at 14:17

score 1 · Answer 4 · answered Nov 02 '12 at 14:50

1

Here you go:

<div class-"container">
 <div class="arrow-body"></div>
 <div class="arrow-right"></div>
</div>

.container {
 width:300px;
 overflow:auto;
}

.arrow-body {
 width:270px;
 height:60px;
 background:green;
 float:left;
}

.arrow-right {
 width: 0; 
 height: 0; 
 border-top: 30px solid transparent;
 border-bottom: 30px solid transparent;
 border-left: 30px solid green;
 float:left;
}

answered Nov 02 '12 at 14:50

Billy Moat

20,792
7
45
37

This wouldn't allow gradients, and could easily be accomplished with the two pseudo elements. No need for all that extra markup (unless you're still supporting IE6, in which case I feel *really* sorry for you). – Joseph Silber Nov 02 '12 at 14:52

How to create div with angle

4 Answers4