<div class="container">
        <h1>Clip-path CSS</h1>


        <div class="box-image">
            <div class="row align-items-center">
                <div class="col-4">
                    <div class="image">
                        <img src="https://i.picsum.photos/id/103/600/400.jpg" alt="Bora Bora" class="img-fluid">
                    </div>
                </div>
                <div class="col-8">
                    <code>Immagine originale</code>
                </div>
            </div>
        </div>

        <div class="box-image">
            <div class="row align-items-center">
                <div class="col-4">
                    <div class="image">
                      <img id="img-inset" src="https://i.picsum.photos/id/103/600/400.jpg" alt="Bora Bora" class="img-fluid"> 
                    </div>
                </div>
                <div class="col-8">
                    <code>
                        #img-inset {
                            clip-path: inset(20% 10% 5% 30%);
                        }
                    </code>
                </div>
            </div>
        </div>

        <div class="box-image">
            <div class="row align-items-center">
                <div class="col-4">
                    <div class="image">
                      <img id="img-polygon" src="https://i.picsum.photos/id/103/600/400.jpg" alt="Bora Bora" class="img-fluid">
                    </div>
                </div>
                <div class="col-8">
                    <code>
                        #img-polygon {
                            clip-path: polygon(0 0, 94% 9%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
                        }
                    </code>
                </div>
            </div>
        </div>

        <div class="box-image">
            <div class="row align-items-center">
                <div class="col-4">
                    <div class="image">
                      <img id="img-cirle" src="https://i.picsum.photos/id/103/600/400.jpg" alt="Bora Bora" class="img-fluid">
                    </div>
                </div>
                <div class="col-8">
                    <code>
                        #img-cirle {
                            clip-path: circle(45% at 17% 50%);
                        }
                    </code>
                </div>
            </div>
        </div>

        <div class="box-image">
            <div class="row align-items-center">
                <div class="col-4">
                    <div class="image">
                      <img id="img-ellipse" src="https://i.picsum.photos/id/103/600/400.jpg" alt="Bora Bora" class="img-fluid">
                    </div>
                </div>
                <div class="col-8">
                    <code>
                        #img-ellipse {
                            clip-path: ellipse(65% 26% at 35% 50%);
                        }
                    </code>
                </div>
            </div>
        </div>

        <div class="box-image">
            <div class="row align-items-center">
                <div class="col-4">
                    <div class="image">
                        <svg>
                            <clipPath id="clip-text">
                                <text x="50%" y="50%" fill="red" text-anchor="middle">HELLO!</text>
                            </clipPath>
                        </svg>
                      
                        <img id="img-svg" src="https://i.picsum.photos/id/103/600/400.jpg" alt="Bora Bora" class="img-fluid">
                    </div>
                </div>
                <div class="col-8">
                    <code>
                        #img-svg {
                            clip-path: url("#clip-text");
                        }
                    </code>
                </div>
            </div>
        </div>

    </div>
.box-image {
    margin-bottom: 30px;
}

#img-inset {
    clip-path: inset(20% 10% 5% 30%);
}

#img-polygon {
    clip-path: polygon(0 0, 94% 9%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

#img-cirle {
    clip-path: circle(45% at 17% 50%);
}

#img-ellipse {
    clip-path: ellipse(65% 26% at 35% 50%);
}

.image {
    border: 1px solid #ccc;
    position: relative;
}
svg {
    font-family: "Arial Black", sans-serif;
    font-size: 80px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#img-svg {
    clip-path: url("#clip-text");
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.