javascript - CSS3 vertical Ribbon - Stack Overflow

admin管理员组

文章数量:1399013

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

Share Improve this question Follow edited Dec 10, 2012 at 14:33 Irishgirl asked Dec 8, 2012 at 21:06 IrishgirlIrishgirl 75133 gold badges1414 silver badges2323 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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)

本文标签： javascriptCSS3 vertical RibbonStack Overflow