How to code vertical banner

Question

I have found some solution for vertical banner I would like to use in mine bootstrap 3 responsive design, but I would like to modify it and I need help because I am failing to grasp the concept of coding mine banner to looks like this.

ribbon

This is the solution I have found.

CSS and HTML is as follows

    div {
        background: deeppink;
        height: 30px;
        width: 30px;
        position: relative;
        text-align: center;
        font: 600 16px sans-serif;
        color: #fff;
        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;
    }

    <div> i </div>

See Fiddle for banner here. Now how can I modify this banner to lock more like mine banner, especially how can I make the head of this example banner to look's pointy like on the picture. Can someone help me make this, thank you.

possible duplicate of [How can I draw vertical text with CSS cross-browser?](http://stackoverflow.com/questions/1080792/how-can-i-draw-vertical-text-with-css-cross-browser) — Dhiraj, Jun 04 '15 at 05:06
ok I got the idea about the text, but what about making the banner end pointy, I want to revers the head, like on the picture. — copser, Jun 04 '15 at 05:17

score 3 · Accepted Answer · answered Jun 04 '15 at 05:39

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 50px;
}
div {
    background: #1589A1;
    padding: 20px;
    position: relative;
    color: #fff;
    width: 100px;    
    min-height: 70px;
    font: 600 16px sans-serif;
    color: #fff;    
}
div:after {
    content:'';
    position: absolute;
    left: 50%;
    bottom: -100px;
    border: 50px solid transparent;
    border-top: 50px solid #1589A1;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
div span{
    padding: 30px 0 30px;
    position: relative;
    display: block;
    z-index: 1;
    -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 transform: rotate(-90deg);
}

<div> 
    <span>solution</span>
    <span>solution</span>
</div>

How to code vertical banner

1 Answers1