Search code examples
cssfrontendpseudo-classclip-pathborder-radius

Clip-path: Curved edges, background image and triangle

I am trying to build the following element with rounded corners and a background image:

Desired outcome

I originally used the :after pseudo element for the triangle, but I couldn't get the background image to 'bleed into' it as it's technically a separate element.

I decided to use clip-path to get the shape and the background functioning correctly. However, because the bottom of the element is where the triangle ends, border-radius only affects the top corners.

This is where I'm currently at:

Current

.service_item{
    min-height:100px;
    background: var(--color-yellow);
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), 40% calc(100% - 20px), 30% 100%, 20% calc(100% - 20px), 0 calc(100% - 20px));
    max-width:300px;
    border-radius: var(--border-radius-card);
    background-image:url('https://images6.alphacoders.com/321/thumb-1920-321927.jpg');
    background-size:cover;
    background-position:center;
    min-height:300px;
 }

Is there a way to curve corners using clip-path polygon, or is there a way to build this that I'm not seeing?

Thanks for your help

Solution

  • Ended up exporting the shape of the image as a png and using CSS Mask.

    Has good browser support - https://caniuse.com/?search=mask

    mask-image: url('path/to/image.png');
mask-size: 100% 100%;
mask-position: center;