How to create a button with overlapping Ribbon Shape in CSS?

Question

I am trying to create a button like the one shown in the picture. A rectangular box with a tag.

i need a button like the picture

HTML:

<ul class="nav navbar-nav">
    <li class="active"><a href="#main-slider">POST FREE Ad</a></li>
</ul>

Any help would be appreciated.

CSS am using now and how do I create a tag like free given in the picture

.navbar-default {
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 0;
    padding: 0;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
    overflow: hidden;
}
.navbar-default .first a {
    border-radius: 0 0 0 5px;
}
.navbar-default .navbar-brand {
    margin-right: 50px;
    margin-left: 20px;
    width: 175px;
    height: 78px;
    background: url(../images/logo.png) no-repeat 0 50%;
}
.navbar-default .navbar-nav > li {
    margin-left: 0.5px;
}
.navbar-default .navbar-nav > li > a {
    padding: 25px 25px;
    font-size: 13px;
    line-height: 18px;
    color: #999;
}
.navbar-default .navbar-nav > li > a > i {
    display: inline-block;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active:focus > a,
.navbar-default .navbar-nav > li.active:hover > a,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li:focus > a,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active:focus > a:focus,
.navbar-default .navbar-nav > li.active:hover > a:focus,
.navbar-default .navbar-nav > li:hover > a:focus,
.navbar-default .navbar-nav > li:focus > a:focus {
    background-color: #52b6ec;
    color: #fff;
}

Could you please make an example on jsfiddle.net in which you are actually sure the CSS works, and point out what is currently wrong with it? — Stephan Muller
– Stephan Muller, Commented Sep 11, 2014 at 19:07
@StephanMuller how to i create tag style like free which is in the picture — sanoj lawrence
– sanoj lawrence, Commented Sep 11, 2014 at 19:13
I understood your question the first time, but you have to at least put in some effort to show what you've tried and where you got stuck before we are going to put any effort into it. — Stephan Muller
– Stephan Muller, Commented Sep 11, 2014 at 19:16

Roko C. Buljan · Accepted Answer · 2014-09-11 20:03:17Z

5

jsBin Demo

A quick introduction, what it takes to create a <span class="ribbon">FREE</span> ribbon shape?:

enter image description here

.ribbon{
  display:inline-block;
  height:0;
  border-bottom:20px solid gold;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
}

Now, using a single <a> element (thanks @Blazemonger for the reminder) let's send that shape to the :after pseudo, adding position, rotation....:

enter image description here

<a href="#" data-ribbon="FREE">Submit an Ad</a>

[data-ribbon]{
  position:relative;
  display:inline-block;

  padding:20px 26px;
  background:#FF7700;
  text-align:center;
  color:#fff;
  text-decoration: none;
}

[data-ribbon]:after{
  content: attr(data-ribbon);
  position:absolute;
  top: 6px;
  right:-22px;

  height:0;
  border-bottom: 20px solid gold;
  border-left:   20px solid transparent;
  border-right:  20px solid transparent;
  transform: rotate(45deg);
}

edited Sep 11, 2014 at 20:03

answered Sep 11, 2014 at 19:26

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Blazemonger Over a year ago

You don't need to use a nested <span> if you set it using :after.

Roko C. Buljan Over a year ago

@Blazemonger Exactly! Thanks! And I need a coffee! :) creating another example lol

Blazemonger Over a year ago

Ah, but that's where content: attr(data-something) comes in handy

Roko C. Buljan Over a year ago

@Blazemonger looool I know.... that's why I removed my nonsense. You know those days when it's smart to be actually at sleep... :D

Roko C. Buljan Over a year ago

@Christina Without tweaking the above code IE8 will fail! caniuse.com/#search=rotate but you can use stackoverflow.com/questions/19176169/ie8-css-rotation The data- attribute is from HTML5 so you'll need to use content: "FREE" in CSS

|

Temani Afif · Accepted Answer · 2018-07-20 20:09:56Z

Here is another idea using linear-gradient to create the shape:

[data-ribbon] {
  position: relative;
  display: inline-block;
  padding: 20px 26px;
  background: #FF7700;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

[data-ribbon]:after {
  content: attr(data-ribbon);
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  padding: 2px 25px;
  background: 
    linear-gradient(to top right, gold 49%, transparent 50%) right/20px 100% no-repeat, 
    linear-gradient(to top left, gold 49%, transparent 50%) left/20px 100% no-repeat, 
    linear-gradient(gold, gold) center/calc(100% - 40px) 100% no-repeat;
  color: #fff;
  transform: rotate(45deg) translate(26%, -60%);
}

<a href="#" data-ribbon="FREE">Submit an Ad</a>

Collectives™ on Stack Overflow

How to create a button with overlapping Ribbon Shape in CSS?

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related