Streaming live at 10am (PST)

How to make css svg whitout triangle.svg

#1

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

can polygon clippath be intergrated into webflow?


Thanks to help
Karel

#2

Hi @KarelRosseel82,

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

#3

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

#4
  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.
#5

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

#6

@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

Background-image with bottom angle: box-sizing option needed for correct border-bottom angle-effect
#7

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

Add input: not only with alt+click-left/right: ALSO with value with actived mouse SCROLLWHEEL please
#8

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: set on 'cover' shows NOT 'cover' by angle-section

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

#9

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

#10

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
    Screenshot_2019_04_14_21_52_14
    Screenshot_2019_04_14_21_52_01

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

Thanks
Karel

#11
#12

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