Sharp Corner for Div

Design help General
1

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?

2

Not by webflow CSS editor. Use custom css code.

Add class to element X (some div)

image
image705×505 22.9 KB

+
Match the CSS selector (.test in my example) + this code not so modular (You should change the color her)
image
image1371×800 38.8 KB

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
3

Thanks Siton for this solution. :+1:

1 Like
4

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