Sharp Corner for Div

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

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)

.test {    
		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;

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!)