css - Folded banner using css and border and fade

Question

I'm trying to figure out howto do a folded banner with a red border using css.

Is it possible to do a smiliar one to the picture below?

Answer 1

Hey there is a nice tutorial on Tutsplus that might be a good starter. http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-practical-css-shapes/

Demo here: http://s3.amazonaws.com/nettuts/676_cssShapes/shapes.html

Answer 2

Can be done with psuedo-elements.

jsFiddle Demo

div::before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    right: 0;
    bottom: -12px;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #AA0000;
}

Answer 3

I would request that you actually TRY to do what you are asking, instead of having other users do coding for you. That being said, I think the trickiest part of this would be implementing the triangle portion on the bottom. To do this in CSS, see this link:

http://css-tricks.com/snippets/css/css-triangle/