Question

I’m looking for CSS3 code for the ribbon as below, please?

This is what it should look like this and size width 30px and height 44px:
I don’t have any code to offer for sample or something to work from e.g JS fiddles.

align top http://www.kerrydeaf.com/pink.png

I’ve seen this http://css-tricks.com/snippets/css/ribbon/

But it is horizontally. I’m looking for vertical like the above.

UPDATE Monday, 10 December 2.30pm:
@Zoltan Toth – I’ve included a JS Fiddle on comments as below.
(I’m not allowed to post JS fiffles here).

Answer 1

You can try something like this – DEMO

HTML

<div> i </div>

CSS

div {
    background: deeppink;
    height: 30px;
    width: 30px;
    position: relative;
    text-align: center;
    font: 600 16px sans-serif;
    color: white;
    line-height: 27px;
    border: 0;
}

div:after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 0;
    height: 0;
    width: 0;
    border: solid 15px deeppink;
    border-bottom-color: transparent;
}

div:hover {
    background: purple;
}

div:hover:after {
    border-color: purple;
    border-bottom-color: transparent;
}​