Streaming live at 10am (PST)

How to make css svg whitout triangle.svg

does somebody as has a good example for CSS shapes into webflow?


my only solution for the momebt is importing a triangle from

but there should be a different solution for

can polygon clippath be intergrated into webflow?

Thanks to help

Hi @KarelRosseel82,

Can you be more specific on what you are trying to do?


  1. I want to make a skew section (but via section, transform:skew) (and via a triangle. svg)
  2. how to make a clip-path for an image the way
    works for an overlay

thanks to help me

  1. If you just need a section with bottom/top diagonal lines, you can use the border trick.
  2. The easiest way to do this is with a simple div with 45deg. rotation. You don’t need to skew the blue cover.

thanks @avivtech for the bordertip.
but how exactly works it?

For the div above image or ‘clipping picture’ turning a div 45°°. and than use overflow ‘none’ should need maybe an extra option in interaction to use anchorpoints of the div or eather create extra anchorpoints… to grow ‘scale’ a div ‘triangle’ bigger in stead of a square div rotated. 45 degree…

Now a triangle.svg can change from width and height what is more correct to teach students.


@avivtech do you have a solution for this: backgroundimage with angle is an example not made in webflow.

but the problem is the backgroundimage does not fit into your ‘border-trick’
so this is my result for ‘prison escape’-test : the background-image on ‘cover’ isn’t cover at all… because with your method ‘border-trick’ the image comes back… strange: bug into webflow?



Solution for what? It looks like you figured it out really nice. no?

I did not make it myself… I want to try to make this same effect…
I tried your example but found a workaround for the problem backgroundimage ‘cover’: custom with 100vw and 100vh. But this should not be the normal behavior of the ‘Cover’ isn’t it… because the section is also 100vw (block) and the height 100vh!
I posted this as bug of the background-image Background-image with bottom angle: box-sizing option needed for correct border-bottom angle-effect

I tried to make the same : my preview of site:
But I have a problem with text into a container… please can you help me

Thanks to help

I found a solution to get the text in the right position: section 100vh relative, with a div 20vh absolute down: no I give only the div of 20vh a border the way you suggest: 100vw transparant and 20vh height with a color.

this are the border settings:

and this:

Thanks to help me out with the no-triangle.svg idea!

Also for the buttons: is there a solution the way shapeshifter works but than into webflow?
Maybe the webflowteam can make the same idea as
or only a div square turned?
this shapeshifter is used in this video works with this:

  • button with fill for angle

an other example: just the same way as


thanks for the article : I looked up for the way a section can be ‘transparant with angle’ and I found a comment:

I found out in Codepen that the first does not yet works for background-image (= can you help me to let it work? + in webflow: to get no problem to center text above a section ‘with angle’ )

but the second example does…

(picture mountain from )

1 Like