In css, how to create a bulging square

Question

Is it possible to achieve this in pure css, without requiring to use an embedded SVG in your page.

Obvs border-radius: 10px doesn't quite cut it.

Whoever closed the question, the related questions you specified do not satisfy my requirements. The accepted answer resolves it. — digout, Nov 28 '20 at 10:20
the accepted answer is far from achieving what you are showing to us. You may need to update you question then. — Temani Afif, Nov 28 '20 at 10:22
my answer is a bit better now @TemaniAfif - I have changed some values, and now it is a lot better — corn on the cob, Nov 28 '20 at 10:27
@TemaniAfif describe how its 'far from achieving' the desired result. Oh and what do you think "without requiring to use an embedded SVG in your page" means? — digout, Nov 28 '20 at 12:17
if you read the duplicates you will find solutions with only css ;) if you read them of course. — Temani Afif, Nov 28 '20 at 12:28
@TemaniAfif the link you posted here is far from achieving the shape I posted. — digout, Nov 28 '20 at 12:54
the link I posted is only *related*. I did it before I find the duplicates that achieve perfectly your shape — Temani Afif, Nov 28 '20 at 12:59

corn on the cob · Accepted Answer · 2020-11-28T10:26:11.050

Here is a quick example where we change the top and bottom border-radiuses. We can use the other value as a weird kind of height thing which will control the height of our radius.

.box {
    background: #62f;
    color: white;
    border-radius: 50% / 10px;
    padding: 30px;
    width: 1em;
    height: 1em;
}

<div class="box">8</div>

Now then, we can use the ::before and ::after selector to make two of these:

.box::after {
    background: #62f;
    color: white;
    border-radius: 50% / 10px;
    padding: 30px;
    width: 1em;
    height: 1.75em;
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 8px;
}

.box::before {
    background: #62f;
    color: white;
    border-radius: 10px / 50%;
    padding: 30px;
    width: 1.75em;
    height: 1em;
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 2px;
}

<div class="box">8</div>

Now then, I hear you ask, what about our 8? Where has it gone? Well, my friends, it has actually gone behind our weird square. We can wrap it in a span and style this to fix this.

.box::after {
    background: #62f;
    color: white;
    border-radius: 50% / 10px;
    padding: 30px;
    width: 1em;
    height: 1.75em;
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 8px;
}

.box::before {
    background: #62f;
    color: white;
    border-radius: 10px / 50%;
    padding: 30px;
    width: 1.75em;
    height: 1em;
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 2px;
}

.box > span {
    position: absolute;
    top: 32px;
    left: 36px;
    z-index: 5;
    color: white;
    font-size: 1.5em;
    font-family: sans-serif;
}

<div class="box"><span>8</span></div>

We can also swap a few numbers around to make it even more perfect as well:

.box::after {
    background: #62f;
    color: white;
    border-radius: 50% / 20px;
    padding: 30px;
    width: 1em;
    height: 1.75em;
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 8px;
}

.box::before {
    background: #62f;
    color: white;
    border-radius: 20px / 50%;
    padding: 30px;
    width: 1.7em;
    height: 1em;
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 2px;
}

.box > span {
    position: absolute;
    top: 32px;
    left: 36px;
    z-index: 5;
    color: white;
    font-size: 1.5em;
    font-family: sans-serif;
}

<div class="box"><span>8</span></div>

This is not the same shape as example. The edges are straight in your example where they should be rounded at a larger radius than the corners. — digout, Nov 28 '20 at 09:48

score 0 · Answer 2 · answered Nov 28 '20 at 09:36

0

Hope this helps:

.square{
  height:80px;
  width:80px;
  background:blue;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  border-radius:2rem;
  font-size: 2rem;
  opacity: 0.5;
  box-shadow:-1px 1px 1px 1px #fff;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="square">8</div>
</body>
</html>

answered Nov 28 '20 at 09:36

Imran Rafiq Rather

7,677
1
16
35

1

What's the reason for the white box-shadow? – Rickard Elimää Nov 28 '20 at 09:47
2

This is not the same shape as example. The edges are straight in your example where they should be rounded at a larger radius than the corners. – digout Nov 28 '20 at 09:48

In css, how to create a bulging square

2 Answers2