Sharp Corner for Div

Can I build a div box with sharp corners like this example:

http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

in webflow?

Not by webflow CSS editor. Use custom css code.

Add class to element X (some div)


+
Match the CSS selector (.test in my example) + this code not so modular (You should change the color her)

copy-paste (Embed html / or- in the head)

<style>
.test {    
	background:
		linear-gradient(135deg, transparent 10px, #c00 0) top left,
		linear-gradient(225deg, transparent 10px, #c00 0) top right,
		linear-gradient(315deg, transparent 10px, #c00 0) bottom right,
		linear-gradient(45deg,  transparent 10px, #c00 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}
</style>
2 Likes

Thanks Siton for this solution. :+1:

1 Like

Hey @Siton_Systems.

Could you help me how to achieve the same effect but background has to be transparent , only stroke visible?

(you already helped me many times- THANKS!)