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? — Dhiraj
– Dhiraj, Commented Jun 4, 2015 at 5: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
– copser, Commented Jun 4, 2015 at 5:17

Dmitriy · Accepted Answer · 2015-06-04 05:39:22Z

*{ 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>

Collectives™ on Stack Overflow

How to code vertical banner

1 Answer 1

Comments

Hot Network Questions