j
C
o
r
n
e
r
A jQuery Plugin
to Fold Paper Corners

Features

jCorner is a jQuery plugin to create a flat designed paper folding effect at the bottom-right corner, which is useful for both stylishness and a hint for a link.

It uses CSS border tricks to achieve the effect, without using any image, which enables us to create corners of any size. See how to achieve this.

It's a tiny library with minified JavaScript file of 1.2KB. Download Now!

Hello World

To use jCorner, the following files should always be included.

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jCorner.js" type="text/javascript"></script>

Suppose we want to add a corner to an element with id paper in the HTML, jCorner makes it as simple as:

HTML:

<div id="paper"></div>

JavaScript:

$('#paper').jCorner();

Download

jCorner is an open-source project under MIT License.

View at GitHub Download jCorner.js Download jCorner.min.js

Documentation

There're 4 parameters to set with jCorner, none of which is compulsory. Default values are:

size: 40;
id: undefined;
link: undefined;
background: '#fff'; 

Example:

$('#paper').jCorner({
    size: 25,
    background: 'black'
});

$('#paper').jCorner({
    background: '#ffcc00',
    link: 'about.html',
    id: 'about'
});

size

As its name suggests, the size parameter defines how big is the corder, in pixels.

id

It might be useful to set an id to the corner. We can do this by setting the id parameter. If it is undefined, there would be no id attribute of the corner.

link

We may add a link to the corner so that it will open a new tab when the corner is clicked. The value of link should be a string like "http://zhangwenli.com".

background

We usually need to set this parameter since the background in different web pages are different. For example, the background is set to be "#ccc" in this page.

About Author

jCorner is developed by Wenli Zhang, a hobbyist Web front-end designer. Check her personal site for more information.

Follow Her

Follow her on Instagram or Google Plus.

Email me@zhangwenli.com if you wish to give her a dribbble invitation!

Notice

Background image used in this page is designed by Peax.