How to make css svg whitout triangle.svg

Design help General
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?

Screenshot_20190410-051950
Screenshot_20190410-0519502190×1080 266 KB

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
    Screenshot_20190410-204837
    Screenshot_20190410-2048371080×2280 845 KB

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?

Screenshot_2019_04_14_21_42_35
Screenshot_2019_04_14_21_42_351421×717 70.2 KB

Screenshot_2019_04_14_21_40_10
Screenshot_2019_04_14_21_40_101421×645 798 KB

Thanks
Karel

7

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

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 with bottom angle: box-sizing option needed for correct border-bottom angle-effect

image
image1431×665 328 KB

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

image
image1433×679 45.3 KB

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.

image
image1429×663 407 KB

this are the border settings:
image
image1390×196 82.9 KB

image
image1390×195 79.1 KB

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 Welcome to Xeikon | Xeikon
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: Creating Non-Rectangular Headers | CSS-Tricks - CSS-Tricks

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

image
image1366×1158 298 KB

(picture mountain from The 20 Best Mountains In The World (For Your World Travel Bucket List) )
Thanks
Karel

1 Like