What You Will Learn In This Post
In this post, I’m going to explain how to make jCorner, a jQuery plugin to create paper folding effect at the bottom-right corner.
jCorner is a jQuery plugin to create paper folding effect at the bottom-right corner, as shown above.
I used CSS Border tricks to make this, without using any image. So, we can use this plugin to create foldered corner of any size.
CSS Border is an attribute that even beginners of Web programmers are familiar with. We use styles like
border: 1px solid #f00; to create borders everywhere.
Now, CSS Border has a new use to us.
Jonrohan explained in detail how to use this trick to create triangles. The main idea is to create an element of
width: 0; height: 0; and set the width of four borders respectively and thus creating four triangles.
In order to generate paper folding effect as shown above, we need to divide them into three triangles and then use CSS Border to create them all.
First, we create a div
<div class="jCorner"></div> to be positioned at the bottom-right coner, which will later be the root of our foldering corner elements.
Suppose each triangle’s right-angle sides are of
25px, then, width and height of
.jCorner should be set to
width: 50px; height: 25px;.
In order to make it at the bottom-right part of its parent, we had to set
position of its parent (the one with blue blackground) to be
relative. And then set
.jCorner to be
bottom: 0; right: 0;.
.jCorner has three children representing three triangles.
That’s all we need to do with
We use the CSS Border tricks to create triangls, as talked before.
Watch carefully and you may find that
.jCorner_right are of the same direction and only differ in color.
.jCorner_center is a little bit different from the former two. Pay attention to the difference with border attributes.
By now, we can create folding effect completely. Next, we need to make a jQuery plugin, which can set the size and more.
This is the second jQuery plugin I wrote. Last year, I wrote a jQuery plugin for Web Audio, so it’s easy for me to pick it up a year later.
jQuery official site provides a good example to start.
For jCorner, it’s quite simple to implement. The idea is to generate a string to append to the parent element. Don’t forget to set
position of the parent to be