10

I've used a few clip-path polygon shapes to create downward pointing content boxes on my site, you can see a few examples on the home page here: http://550.9f2.myftpupload.com/ and this is the CSS I'm using:

.bottom_arrow {
-webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}

But I understand this doesn't work in Firefox without some modifications (like using a .svg URL?) and that even this doesn't work in IE and Edge. Is there an alternative CSS trick I can use to make these shapes that has better cross-browser support?

AndrewCoCo
  • 153
  • 1
  • 2
  • 12
  • Thank you, is there any alternative you'd suggest to produce this effect that has better browser support? Particularly IE and Edge? – AndrewCoCo Feb 07 '17 at 14:45
  • IE will not clip html elements so you need to implement things in SVG in order to clip them with an SVG clipPath. – Robert Longson Feb 07 '17 at 15:32
  • Does that essentially mean that I need to make the background a solid SVG rectangle - and then I will be able to apply a clip-path to that SVG? – AndrewCoCo Feb 07 '17 at 17:26
  • Either that or just draw the shape you want in SVG directly. – Robert Longson Feb 07 '17 at 17:27
  • @RobertLongson I still can't seem to get this to work. I made the background of the green block below the top banner on this page into an SVG http://550.9f2.myftpupload.com/about/bob-stutman/ with a class name of .style-svg, so shouldn't the below CSS work? `code .style-svg { -webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); } ` – AndrewCoCo Feb 07 '17 at 18:33

2 Answers2

2

This question recently got a bump because it was unanswered. In 2020, we're living in a world where clip-path is almost universally supported. So I think it's safe to say the browsers have caught up and the case is closed!

Benjamin
  • 180
  • 1
  • 10
0

I ran into this issue building this site here http://mindcloak.com/vici/.

My way around this was to hide clip-paths on these browsers and use css shapes.

regular clip-path

.tri-green-left {
    width: 101%;
    height: 400px;
    position: absolute;
    z-index: 15;
    background: rgba(93,140,127,0.7);
    -webkit-clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
    clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
}

css shapes to show for non supported browsers

/* IE 10+ Styling Stuff */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    #triangle-greenleft {
        width: 0;
        height: 0;
        margin-top: -50px;
        border-bottom: 900px solid rgba(93,140,127,0.7);
        border-right: 750px solid transparent;
        overflow: hidden;
    }

/* Egde Browser Support */ @supports (-ms-ime-align:auto) {

    #triangle-greenleft {
        width: 0;
        height: 0;
        border-bottom: 700px solid rgba(93,140,127,0.7);
        border-right: 200px solid transparent;
        overflow: hidden;
    }
Chris C
  • 21
  • 3