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, Sep 11 '14 at 19:07
@StephanMuller how to i create tag style like free which is in the picture — sanoj lawrence, Sep 11 '14 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, Sep 11 '14 at 19:16
Related: http://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with-css3 — Blazemonger, Sep 11 '14 at 19:56

Roko C. Buljan · Accepted Answer · 2014-09-11T20:03:17.557

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 '14 at 20:03

answered Sep 11 '14 at 19:26

Roko C. Buljan

196,159
39
305
313

You don't need to use a nested `` if you set it using `:after`. – Blazemonger Sep 11 '14 at 19:29
@Blazemonger Exactly! Thanks! And I need a coffee! :) creating another example lol – Roko C. Buljan Sep 11 '14 at 19:31
1

Ah, but that's where [`content: attr(data-something)`](http://jsfiddle.net/mblase75/30adkc11/1/) comes in handy – Blazemonger Sep 11 '14 at 19:34
@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 Sep 11 '14 at 19:36
[My final version](http://jsfiddle.net/mblase75/30adkc11/) -- not necessarily better than yours, but it might be more flexible when it comes to changing the button text. – Blazemonger Sep 11 '14 at 19:43
@Blazemonger kudos to your fresh brain >> I edited my answer and here's for you a FF SShot: http://i.imgur.com/HqJkTAn.jpg :) Thanks. Drinking my coffee now, should be better. – Roko C. Buljan Sep 11 '14 at 19:46
I'd like to start using this today, but will ie8 pick up the text at least. Only answer if you know offhand, don't spend more time on this. Thanks, this is great! – Christina Sep 11 '14 at 19:56
1

@Christina Without tweaking the above code IE8 will fail! http://caniuse.com/#search=rotate but you can use http://stackoverflow.com/questions/19176169/ie8-css-rotation The data- attribute is from HTML5 so you'll need to use `content: "FREE"` in CSS – Roko C. Buljan Sep 11 '14 at 20:01
Thanks! I will use with a fallback. – Christina Sep 11 '14 at 21:40

score 1 · Answer 2 · answered Jul 20 '18 at 20:09

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>

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

2 Answers2