Andrew Poulos wrote:
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
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
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)