Views :- 909

Pure Css Base Folded Corner Without Using Image

Now a days with the help of CSS3 you can develop any kind of shape. In this article we are going to fold top right corner of div, Which nothing but a triangle shape. We choose to do it using css, otherwise image is the easy way to do it.

So let start with the implementation of folded corner code using CSS and HTML only Only modern and latest version browsers are supporting this effect. (Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+). In this example, the top and right corner borders are set to color that match the background color of the parent div element. The left and bottom border are then given a slightly darker shade of the div background color. border-width:0 25px 25px 0; Define right , bottom width which creates the triangle (folded part).

Step #1:-Define Div

<div class="foldMe">
    <p>Thank you for visiting our website www.technicalkeeda.com , hope you enjoy all the articles posted by us. Please share our articles within your friend circle. This will help us to grow on broader level.</p>
</div>

Step #2:-Define Css

<style>
.foldMe {
    position:relative;
    overflow:hidden;
    padding:10px;
    margin:2em 10%;
    color:#fff;
    background:#FF3300;
}

.foldMe:before {
    content:'';
    position:absolute;
    top:0;
    right:0;
    border-width:0 25px 25px 0;
    border-style:solid;
    border-color:#B22400 #fff;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.4),-1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.4),-1px 1px 1px rgba(0,0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0.4),-1px 1px 1px rgba(0,0,0,0.2);
}
</style>

Step #3:-Finish Enjoy the Live demo :)

css

Pure Css Base Folded Corner Without Using Image

Popular Posts

You also Like this Tutorials

Other Posts