The clip-path CSS property property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

In the TripTime project, I made a polygon effect for small screen views of the landing page:

polygon

I achieved this by adding a pseudo-element with border property:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.introRight {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 40vh;
    background-color: rgba(256, 256, 256, 0.95);
    font-size: 4.5vw
}

.introRight::after {
    z-index: 2;
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: 40vh solid rgba(256, 256, 256, 0.95);
}


.introRight::after {
    border-right: 100vw solid transparent;
}

Now I learnt that I could also achieve this shape through:

1
2
3
4
5
6
7
8
9
10
.introRight {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 80vh;
        background-color: rgba(256, 256, 256, 0.95);
        font-size: 4.5vw;
        clip-path: polygon(0 40vh, 100vw 0vh, 100vw 80vh, 0 80vh);
    }

With the polygon type, give a bunch of x-y coordinates. These specify position relative to the element itself, starting from the left top corner as (0, 0).

Other options available for clip-path can be found at the MDN page