how to insert a ribbon inside a div how background without images only pure css? [closed]

Tags: html,css

Problem :

I want to add a background ribbon inside a div without images with only pure CSS.

I tried using :after and :before but didn't have any luck.

The ribbon is green, and must be same as below:

Ribbon screenshot

Anyone here that can help me? Remember - my div can grow in height with the content.

Solution :

I applied some transforms on the :after pseudo-element. Here's how:


.ribbon {
    background: #04F;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
.ribbon:after {
    content:' ';
    position: absolute;
    background: #0F4;
    width: inherit;
    height: inherit;
    padding: inherit;
    top: 0;
    right: -70%;
    -webkit-transform: skew(-15deg, 0deg);
       -moz-transform: skew(-15deg, 0deg);
            transform: skew(-15deg, 0deg);

Just work with the padding, text-align and colors to achieve the exact effect.

    CSS Howto..

    How to imitate the native iPhone look and feel in a web app developed with the ASP.NET platform?

    How do I code a BTN in an HTML project to open a users email client

    How to include google search result in my specified div width and height?

    How can i make this border to the end?CSS

    How to simulate nonstoparagraphing in HTML/CSS?

    How do I get jQuery to change classes according to an If/Then statement. My 'home' link will not change class when another link clicked on

    How to use Font Awesome for checkboxes etc

    How to create that background on my page with css [duplicate]

    How can I add an image to a
  • tag dynamically
  • How does jQuery's toggle function work, how to write it in javascript without jquery?

    How to implement dynamic layout columns by using the `content_for?` method?

    How to dynamically change pseudo-class value in css

    How to extract icon from picture and display it in page? (by javascript or jquery or css)

    How to change property of a specific CSS pseudo element?

    how to make an odd shaped html/css menu?

    What's the difference between “.” and “#” in CSS and how to choose to use?

    Css overflow-y: how to show only when needed

    Is this how CSS LESS and SimpLESS work? [closed]

    How to make Wrapper div contain only non-overflowing divs

    How float divs inside a td

    How to centralise a button div

    How do you group similar n-th child selectors? [duplicate]

    How to overcome Selenium CSS parent only CSS selector limitation

    In IE6, how to implement a:hover?

    How can I get drop-down functionality working with CSS?

    How to make a bootstrap modal fade in from the bottom?

    How to create dynamic CSS based on user input

    How to set css to a specific selector using jQuery

    how to make background image stretch vertically

    How to set my Django form on the center of the page