0

I am working on a one page html page below design (this is simplified version on main design. the main design is here ).

enter image description here

As you see there are three section (or more) that created by a div(or any other block-level element).

The bottom edge of each div is made of three connected line (two of them are diagonal and another is solid).

In each section can insert any html content and background-color of them is not specified and can different.

I searched many on the web and found that to create clipped div(box) should I use clip-path new css property. that's awesome for this purpose but it is very new and some of browsers (in their older versions) and IE (that is important for me) does not supported.

Even, by Clippy tools, I created a simple design of a section that you can see on CodePen.

Can I use SVG to make this scheme if yes, how?

Can anyone help me that How can I design this scheme where been supported in major browsers.

Update: I change the design picture for More clarity

Ahmad Badpey
  • 6,348
  • 16
  • 93
  • 159
  • https://github.com/AlfonsoFilho/ClipPath – chiliNUT Jun 25 '16 at 17:45
  • tnx,But can you explain how to use it? where is it's documentation? did you use it before? does it support IE versions? – Ahmad Badpey Jun 25 '16 at 17:56
  • Which IE versions do you need to support? – Asons Jun 26 '16 at 07:36
  • @LGSon, minimum version of IE that can implement this scheme . – Ahmad Badpey Jun 26 '16 at 07:52
  • Possible duplicate of [Fill SVG path element with a background-image](http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image) – Asons Jun 26 '16 at 08:00
  • Voted to close as dupe as it will most likely be the best answer to your question. Here is one more post that might be helpful: http://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg-circle-shape – Asons Jun 26 '16 at 08:01
  • Searching the web using "svg shape with image" gave me those links and then some ... and as CSS shapes does not work cross browser, SVG will be the best second choice – Asons Jun 26 '16 at 08:04

0 Answers0