How To Create CSS Folded Corner Effect

As you have learnt html and css. Now it’s time for learn some extra tips about it. In this article I am explain about css folded corner effect . At first view you may see this like a image but this is not a image.css folded corner effect is a very interesting thing of css.  For demo view you can see the following demo.

CSS Folded Corner Effect


css folded corner effect

I think you have finished your basic css learning from our previous article. You must need to know about position ,margin, padding.

Look at the following html text;

<p class='note'>Deeply Welcome and Thank your for visiting to our website <a href="" target='_blank'>H2CWEB</a> which is short form of <a href="" target='_blank'> “How to Create a Website”</a>. Our aim to give real information about “How to Create a Website”.

Today it is a trend to have a website of yours own. Of course it’s being the necessity of our today’s life. We are experienced over 7 years in Web Development. Have a great market value in local market. We have Expert WordPress Developer, Excellent Graphics Designer, SEO expert to evaluate the market.


I am going to design it with CSS and create a css folded corner effect.

Now, take a view into the following css syntax ;

.note {



padding:1em 1.5em;

margin:2em auto;




.note:before {





border-width:0 32px 32px 0;


border-color:#2554c7 #fff;


Put this inside your html head tag. Than save it and open it by your browser. You can get your final result like the demo page. As you know CSS you can edit the value and create css folded corner effect as you need.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.