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

I've seen this /

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 ments as below. (I'm not allowed to post JS fiffles here).

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./pink.png

I've seen this http://css-tricks./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 ments as below. (I'm not allowed to post JS fiffles here).

• javascript
• html
• css

3 Answers 3

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;
}​

Put it inside a DIV, then in the div do this:

div
{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

Or you can use Canvas for that and drawn however you want, and don't need that CSS2 tricks to do that.

Vertical banner with slanted bottom

<div class="verticalbanner"></div>

.verticalbanner {
    background: #e22692; //ribbon color
    height: 44px; // ribbon height
    width: 30px; // ribbon width
}
.verticalbanner:after,.verticalbanner:before {
    content: '';
    position: absolute;
    border-top: 20px solid #e22692; // angle degree, reduce to reduce degree of angles
    height: 0; // no height, no content, just border
    width: 0;
    top: 100%;
}
.verticalbanner:after { // right angle
    border-left: 25px solid transparent;
    right:0;
}
.verticalbanner:before { // left angle
    border-right: 25px solid transparent;
    left:0;
}

jsFiddle (link)