Skip to main content

How to create Bookmark-ribbon using CSS 3

No replies
sanjeev's picture
Offline
Joined: 21 Feb 2011

In my previous post I explained how to exploit border-radius property to draw some amazing shapes which could save lots of web space. I suggested few task there too! One of them was to create a "Bookmark-ribbon with one side red color and other side black color". 

To create such bookmark ribbon shape we just need to know how to exploit border property efficiently. Here is the code snippet which is the most easiest code for all shapes that we drew before and that we will draw ahead ;)


Code:

  1.  
  2. #bookmark-ribbon {
  3. width: 0;
  4. height: 100px;
  5. border-left: 50px solid red;
  6. border-right: 50px solid black;
  7. border-bottom: 30px solid transparent;
  8. }
  9.  


Output would be like this:

 

Follow us at :
Facebook | Twitter
########### Give me the right place to stand, I shall move the earth. #################

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.