1

I'm aware that I'm asking a question without providing any code, however my SVG knowledge is pretty basic and I'm not sure if this can be done at all.

I have the following two divs which have an SVG path in between:

enter image description here

Is it possible to (at least seemingly) have the divs separate based on the SVG pattern? Basically I want to have them in different colours or images. Any help is appreciated, thanks :)

Neekoy
  • 2,325
  • 5
  • 29
  • 48
  • @micken32 Brilliant. Going to give it a try in the morning. You can submit it as an answer or mark as duplicate in the meantime. Thanks :) – Neekoy Nov 17 '18 at 04:20

1 Answers1

1

I would use the SVG as a background image for a <hr> element, and I would put the divs separated by the <hr> element inside a flex container. 

div{flex:1 1 40%; height:100px; border:1px solid #d9d9d9;}
hr{
  flex:1 1 10%;
  border:none;
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat');
background-repeat: no-repeat;
background-size:contain;
background-position: center; }
article{display:flex;}
<article>
<div></div>
<hr>
<div></div>
</article>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • 1
    Thing is, I wanted the background of the divs to follow the SVG pattern, which is exactly what @miken32 linked in the comment :) – Neekoy Nov 17 '18 at 12:43