Jump to content

Tips on how to achieve variable chamfer/beveled edges on <div> (SOLVED)

crispybagel

Hey guys, i've been looking around for a solution to this problem for a while now and i'm having a hard time getting it to work. What i want to achieve is a chamfer with variable radiuses on a div like this. Currently im using an image to get this result but i want text inside it so it would be much more viable if i had a div instead.

Appreciate all the help i can get!

 

Banner.png

Link to comment
Share on other sites

Link to post
Share on other sites

Nvm i solved it using clip-path: polygon() like this.

div {
	height: 100px;
    width: 500px;
    background: black;
	clip path: polygon(
   		0 0, // x,y coordinate top left
    	100% 0, // x,y coordinate top right
    	95% 100%, // x,y coordinate bottom right
    	5% 100% // x,y coordinate bottom left
    );
}
    

It creates 4 points and clips away everything outside of that.

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×