How to make css svg whitout triangle.svg

[KarelRosseel82 (Karel Rosseel)]

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

thanks

my only solution for the momebt is importing a triangle from http://editor.method.ac

but there should be a different solution for
-clipping-path

• skew-section
  
  
  
  look to this video https://youtu.be/QY7Rj8aZcZk
  
  
  
  

can polygon clippath be intergrated into webflow?

Thanks to help
Karel

[avivtech (Aviv Shwartz)]

Hi @KarelRosseel82,

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

[KarelRosseel82 (Karel Rosseel)]

hi,

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 https://www.vanoord.com/nl/activiteiten/dubai
   works for an overlay
   
   

thanks to help me
Karel

[avivtech (Aviv Shwartz)]

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.

[KarelRosseel82 (Karel Rosseel)]

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.

greetings
Karel

[KarelRosseel82 (Karel Rosseel)]

@avivtech do you have a solution for this: backgroundimage with angle
https://prisonescape.nl 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?

Thanks
Karel

[avivtech (Aviv Shwartz)]

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

[KarelRosseel82 (Karel Rosseel)]

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 www.prisonbreak.nl : my preview of site:
https://preview.webflow.com/preview/karelrosseel-prisonescape-nl?utm_source=karelrosseel-prisonescape-nl&preview=98f67f345f338b6ada0b8ff10a2f371a
But I have a problem with text into a container… please can you help me

Thanks to help
Karel

[KarelRosseel82 (Karel Rosseel)]

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

[KarelRosseel82 (Karel Rosseel)]

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 https://shapeshifter.design/
or only a div square turned?
this shapeshifter is used in this video https://www.youtube.com/watch?v=P35hQOsW0xU&t=1362s

www.prisonbreak.nl works with this:

• button with fill for angle
  
  

an other example: just the same way as https://www.xeikon.com/en

Thanks
Karel

[avivtech (Aviv Shwartz)]

Creating Non-Rectangular Headers | CSS-Tricks

[KarelRosseel82 (Karel Rosseel)]

thanks for the article : I looked up for the way a section can be ‘transparant with angle’ and I found a comment: https://css-tricks.com/creating-non-rectangular-headers/#comments

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’ ) https://codepen.io/karelrosseel-prive/pen/qwxBWm

but the second example does… https://codepen.io/karelrosseel-prive/pen/dLdyyZ

(picture mountain from https://greenglobaltravel.com/top-10-mountains-in-the-world-for-your-world-travel-bucket-list/ )
Thanks
Karel