How to round-off an image with CSS

user_4162659 0
Viewed 605

I'm trying to recreate an image shape, based purely on CSS. Although it seems to be very hard to make this exact shape, as I can not seem to find CSS properties that could solve other than making an outline in svg and transfer that on an CSS property, but that seems wrong.

Therefore, I would like to know if there's something I'm missing, it seems like an simple task.

The image shape can be seen here:

This is not a simple border-radius question as the previously-marked duplicate would suggest, as it's bulging out in the "sides" where it would be straight when using border-radius or "to-round".

svg css
1 Answers

Apparently the shape is called an Squircle. After I found that term, it was quite easy to find someone who has already found a solution to creating the shape. I will leave the solution here, if somebody else needs it (definitely not as simple as border-radius):

Please be aware that I did NOT create this solution, all credit should be given to Mkmueller, https://codepen.io/mkmueller/, for his solution here: https://codepen.io/mkmueller/pen/wRJYKa

* {
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

svg.defs {
    position: absolute;
    width: 0;
    height: 0;
}

.squircle {
    width: 75vmin;
    height: 75vmin;
    background: url(https://source.unsplash.com/user/mkmueller/likes/1000x1000) center / cover, #aaa;
    clip-path: url(#squircle);
}

.wrapper {
    filter: drop-shadow(0 0 100px rgba(#000, .25));
}
<svg class="defs">
    <defs>
        <clipPath id="squircle" clipPathUnits="objectBoundingBox">
            <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" fill="#f00"/>
        </clipPath>
    </defs>
</svg>

<div class="wrapper">
    <div class="squircle"></div>
</div>

user_41626590
Related