Responsive radius as semicircle

[Andrew Poulos]

I have a div whose top needs to have a semicircular shape. The initial
width of the div was 48px.

To get a semicircle I set
border-radius: 24px 24px 0 0;

But the size of the div is meant to be responsive so I set the width to
a percentage.

Having a percentage size for the div means that when the width of the
div increases the top of it changes from a "regular" semicircle to a
"flattened" one.

When I tried using % for border radius it displays an elliptical semicircle.

How can I get border radius to always display a "regular" semicircle
irrespective of the size of the div?

Andrew Poulos

[Jonathan N. Little]

When you your viewport be smaller than 48px? Oh well for demonstration
purposes:

CSS:
.container {
/* only to show responsive design */
outline: 1px dotted #00f;
margin: 48%;
}
.semicircular {
width: 100%;
max-width: 48px;
}

.semicircular > div {
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
overflow: hidden;

}

.semicircular > div::after {
content: '';
background-color: #f00;
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50% 50% 0 0;
top: 50%;
}


HTML:

<div class="container">
<div class="semicircular">
<div></div>
</div>
</div>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com