4

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".

TylerH
  • 20,799
  • 66
  • 75
  • 101
Rakkey
  • 121
  • 5
  • 1
    Have you tried setting a border-radius? – kojow7 Jan 07 '19 at 21:01
  • 4
    I don't agree with the duplicate, it's not a simple border-radius here – Temani Afif Jan 07 '19 at 21:07
  • I am pretty sure `clip-path` has a solution here. Unsure about the exact constraints to replicate this image, but here's a playground to get started with: https://bennettfeely.com/clippy/ – Griffin Jan 07 '19 at 21:16
  • The duplicate is not the same. OP is trying to make a squircle mask which is a duplicate of https://stackoverflow.com/questions/32979585/how-to-squircle-an-app-icon-image-with-just-css. – Artur Kim Jan 07 '19 at 21:47
  • 1
    @ArturKim you beat me to my update, when I found the name of the shape, an solution was out there :) Thanks for your comment though, the 2 moderators must have looked a bit to quick on the image. – Rakkey Jan 07 '19 at 21:49
  • I reopened the question, answer your own question with what you found, don't keep it on the question – Temani Afif Jan 07 '19 at 21:53

1 Answers1

7

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>
Rakkey
  • 121
  • 5