Docs

[Alejandro Jose S]

Hello!

I’ve been struggling with this for a while and i feel i’m almost there but i really need your help.

i want to add a separator to my section that will be like a big triangle. It’s made using SVG (code copied from Tympanus). I know how and where to put it but SVG is kind of new to me so i don’t really know how can i make the inside of the triangle inherits the section background image, while the outside of it gets a normal color background.

right now here’s what i have: http://prntscr.com/bk7k4k

as you can see, i’m almost there. i added a white background to the row and the SVG shape has a #000 fill and stroke, it’s pretty easy to manipulate it when it comes to color but i would like to have the section’s background image.

Is there any property or JS that could help me achieve that?

Right now i have this on my custom CSS:

/* Big Triangle */
svg #bigTriangleColor {
	pointer-events: none;
  
}

#bigTriangleColor path {
  background:inherit;
	stroke-width: 2;
}

and this on a raw section inside a row (which is inside the section that has the background image)

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">

<path d="M0 0 L50 100 L100 0 Z" />			</svg>

Could you please point me to the right direction?

Thanks!

[Rad]

Hi there,

Thanks for writing in.

Did some search and it will be complex, first, in order for the image to work on that shape is by clipping. Second, two section are different element hence, the first image isn’t related to the triangle.

It could be possible by HTML5 canvas and draw the image on it with masking, then make the whole section as a canvas. You may contact a developer that is familiar with HTML5 canvas.

Thanks!

[Alejandro Jose S]

Ok, so there’s a way then! That’s already an excellent start! Thank you for the info!

[Joao]

You are welcome.

Let us know how it goes.

Joao

[Author]

Posts