How to crop into a superellipse shape with CSS

Approach

<div class="ellipse">
	<img src="img/img.webp" class="top">
	<img src="img/img.webp" class="right">
	<img src="img/img.webp" class="bottom">
	<img src="img/img.webp" class="left">
	<img src="img/img.webp" class="center">
</div>

② Stack 5 images with absolute positioning.

5 images are stacked.

 /* 箱 */
.ellipse {
	position: relative;
	width: 300px;
	height: 300px;
}

/* absoluteで5枚重ねる */
.ellipse img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

③ Use "clip-path" to create the top, bottom, left, and right sections.

Using the "ellipse" shape of clip-path, arrange the .top .right .bottom .left elements like this.

The images are slightly transparent.

.ellipse .top {
	clip-path: ellipse(42% 14% at 50% 14%); /*上*/
}
.ellipse .right {
	clip-path: ellipse(14% 42% at 86% 50%); /*右*/
}
.ellipse .bottom {
	clip-path: ellipse(42% 14% at 50% 86%); /*下*/
}
.ellipse .left {
	clip-path: ellipse(14% 42% at 14% 50%); /*左*/
}

④ Stack and place an image in the center.

The center image is also cropped into a square with clip-path.

.ellipse .center {
	clip-path: inset(var(--round)); /* 中央の画像 */
}

Well, what do you think? Doesn't it look like a superellipse?

Consolidating with CSS variables

The CSS code from before is a bit messy, so

Here's how to consolidate it using CSS variables to make it easier to adjust.

.ellipse {
	position: relative;
	width: 300px;
	height: 300px;
	
	--angle: 8%; /* 大きくするほど丸っぽく */
	--round: 14%; /* --angleに合わせ､適宜調整 */

	/* これ以降は特に変更の必要なし */
	--anglecalc: calc(50% - var(--angle));
	--roundcalc: calc(100% - var(--round));
}

.ellipse img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ellipse .top {
	clip-path: ellipse(var(--anglecalc) var(--round) at 50% var(--round));
}
.ellipse .right {
	clip-path: ellipse(var(--round) var(--anglecalc) at var(--roundcalc) 50%);
}
.ellipse .bottom {
	clip-path: ellipse(var(--anglecalc) var(--round) at 50% var(--roundcalc));
}
.ellipse .left {
	clip-path: ellipse(var(--round) var(--anglecalc) at var(--round) 50%);
}
.ellipse .center {
	clip-path: inset(var(--round));
}

The larger the value of "--angle", the rounder it becomes.

Adjust the "--round" value accordingly.

Examples

I will introduce various examples.

Basic HTML

<div class="ellipse">
	<img src="img/img.webp" class="top">
	<img src="img/img.webp" class="right">
	<img src="img/img.webp" class="bottom">
	<img src="img/img.webp" class="left">
	<img src="img/img.webp" class="center">
</div>

Basic CSS

From now on, I will introduce the values for "--angle" and "--round".

.ellipse {
	position: relative;
	width: 300px;
	height: 300px;

	--angle: 8%; /* 大きくするほど丸っぽく */
	--round: 14%; /* --angleに合わせ､適宜調整 */

	/* これ以降は特に変更の必要なし */
	--anglecalc: calc(50% - var(--angle));
	--roundcalc: calc(100% - var(--round));
}

.ellipse img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ellipse .top {
	clip-path: ellipse(var(--anglecalc) var(--round) at 50% var(--round));
}
.ellipse .right {
	clip-path: ellipse(var(--round) var(--anglecalc) at var(--roundcalc) 50%);
}
.ellipse .bottom {
	clip-path: ellipse(var(--anglecalc) var(--round) at 50% var(--roundcalc));
}
.ellipse .left {
	clip-path: ellipse(var(--round) var(--anglecalc) at var(--round) 50%);
}
.ellipse .center {
	clip-path: inset(var(--round));
}

Sharper

--angle: 6%;
--round: 7%;

Rounder

--angle: 8%;
--round: 22%;

Rectangle

It works the same way for rectangles.

.ellipse {
	height: 200px;

	--angle: 8%;
	--round: 10%;
}

Example using pseudo-elements

If you think arranging the same image 5 times in HTML is messy, this is for you.

HTML

<div class="ellipse shape5"><span><img src="img/img.webp"></span></div>

CSS

.ellipse {
	position: relative;
	width: 300px;
	height: 300px;

	--angle: 8%;
	--round: 14%;

	--anglecalc: calc(50% - var(--angle));
	--roundcalc: calc(100% - var(--round));
}

.ellipse img,
.ellipse::before,
.ellipse::after,
.ellipse span::before,
.ellipse span::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ellipse.shape5::before,
.ellipse.shape5::after,
.ellipse.shape5 span::before,
.ellipse.shape5 span::after {
	content: "";
	background: url(img/img.webp) 50% 50% / contain no-repeat;
}

.ellipse::before {
	clip-path: ellipse(var(--anglecalc) var(--round) at 50% var(--round));
}
.ellipse::after {
	clip-path: ellipse(var(--round) var(--anglecalc) at var(--roundcalc) 50%);
}
.ellipse span::before {
	clip-path: ellipse(var(--anglecalc) var(--round) at 50% var(--roundcalc));
}
.ellipse span::after {
	clip-path: ellipse(var(--round) var(--anglecalc) at var(--round) 50%);
}
.ellipse img {
	clip-path: inset(var(--round));
}

Comments