How to cut corner of any element in CSS


Div Cropping Using CSS




In web designing some time you need to crop your container/div/element of html page by its corner. Here you will learn how can we do that step by step by using HTML and CSS

CSS Code:
 
div
{
    background-color:#1979CA;
    position:relative;
    color:white;
}


div:before{
    content: '';
    position: absolute;
    top:120px; right: 0;
    border-bottom: 80px solid white;
    border-left: 675px solid #1979CA;
    width: 0;
}

div:after{
    content: '';
    position: absolute;
    top:120px; left: 0;
    border-bottom: 80px solid white;
    border-right: 675px solid #1979CA;
    width: 0;
}

 

Note: You can change div to your any element in HTML.  



Best Book for Entrepreneur ==> 
Strategies To Build Successful Web Agency

How to cut corner of any element in CSS How to cut corner of any element in CSS Reviewed by Ganesh Garad on June 08, 2017 Rating: 5

No comments:

Powered by Blogger.