Clip path or borders for shapes like triangle and simular?

Question

I have design for webpage where everything is made by non-rectangular shapes, polygons, sharp edges… I consider which technique is better to use, clip path with css or with borders? I am asking because i saw on other websites that they are using border technique for shapes.

Why not simple clip path with css like this?

<pre>
.triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</pre>

Instead of this:

<pre>
.triangle {
    width:0;
    border-bottom:solid 50px black;
    border-right:solid 30px transparent;
    border-left:solid 30px transparent;
}
</pre>

there is more ways: https://stackoverflow.com/a/49696143/8620333 — Temani Afif, Aug 05 '19 at 08:52

score 0 · Accepted Answer · answered Aug 05 '19 at 08:04

Use borders. Not Clip-Path

This is, because clip-path is mostly unsupported according to https://caniuse.com/#search=clip-path

If you don't mind your website not working in IE and Edge and only partially in other browsers (with prefix) you can go with clip-path.

Clip path or borders for shapes like triangle and simular?

1 Answers1