Message-ID:

When we write programs that "learn", it turns out we do and they don't.

devel / comp.infosystems.www.authoring.stylesheets / Re: Responsive radius as semicircle

Responsive radius as semicircle

<67qdnUeUYeeappb8nZ2dnUU7-XnNnZ2d@westnet.com.au>

https://www.rocksolidbbs.com/devel/article-flat.php?id=101&group=comp.infosystems.www.authoring.stylesheets#101

copy link Newsgroups: comp.infosystems.www.authoring.stylesheets

Path: i2pn2.org!i2pn.org!weretis.net!feeder6.news.weretis.net!news.snarked.org!border2.nntp.dca1.giganews.com!nntp.giganews.com!buffer2.nntp.dca1.giganews.com!buffer1.nntp.dca1.giganews.com!nntp.westnet.com.au!news.westnet.com.au.POSTED!not-for-mail
NNTP-Posting-Date: Wed, 04 Aug 2021 20:12:39 -0500
Newsgroups: comp.infosystems.www.authoring.stylesheets
X-Mozilla-News-Host: news://news.iinet.net.au:119
From: ap_prog@hotmail.com (Andrew Poulos)
Subject: Responsive radius as semicircle
Date: Thu, 5 Aug 2021 11:12:36 +1000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101
Thunderbird/78.12.0
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8; format=flowed
Content-Language: en-AU
Content-Transfer-Encoding: 7bit
Message-ID: <67qdnUeUYeeappb8nZ2dnUU7-XnNnZ2d@westnet.com.au>
Lines: 19
X-Usenet-Provider: http://www.giganews.com
NNTP-Posting-Host: 110.175.24.76
X-Trace: sv3-R2pDmKiCZPH/pUdTU7hPGw8S2f/9Ta2gUnGKuYUfEbaZ+TqQtDUmeIhGz23SvnbdN9k+qUyW+PxVykO!Yijzfrwtl0c1nVeQKV8XQsCycM+yDzbIJjgsF6Atofx8HyUE1XgtHKRGRcvNqtcg38OYafl2HHK1!3BYOy6VP5J/QtiU48g+T
X-Complaints-To: abuse@westnet.com.au
X-Abuse-and-DMCA-Info: Please be sure to forward a copy of ALL headers
X-Abuse-and-DMCA-Info: Otherwise we will be unable to process your complaint properly
X-Postfilter: 1.3.40
X-Original-Bytes: 1804

by: Andrew Poulos - Thu, 5 Aug 2021 01:12 UTC

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

Re: Responsive radius as semicircle

<segrpd$jln$1@dont-email.me>

copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=102&group=comp.infosystems.www.authoring.stylesheets#102

copy link Newsgroups: comp.infosystems.www.authoring.stylesheets

Path: i2pn2.org!i2pn.org!eternal-september.org!reader02.eternal-september.org!.POSTED!not-for-mail
From: lws4art@gmail.com (Jonathan N. Little)
Newsgroups: comp.infosystems.www.authoring.stylesheets
Subject: Re: Responsive radius as semicircle
Date: Thu, 5 Aug 2021 10:15:07 -0400
Organization: LITTLE WORKS STUDIO
Lines: 72
Message-ID: <segrpd$jln$1@dont-email.me>
References: <67qdnUeUYeeappb8nZ2dnUU7-XnNnZ2d@westnet.com.au>
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Injection-Date: Thu, 5 Aug 2021 14:15:09 -0000 (UTC)
Injection-Info: reader02.eternal-september.org; posting-host="f08f14f92bbba29afe40d6addfb9dbf2";
logging-data="20151"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+37u6Riu/p8+84YJBJGBciYTN++/ME98k="
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101
Firefox/60.0 SeaMonkey/2.53.8.1
Cancel-Lock: sha1:zSNO4zUXjjVTvpSgyW1GRy7uksQ=
In-Reply-To: <67qdnUeUYeeappb8nZ2dnUU7-XnNnZ2d@westnet.com.au>
X-Dan: Yes Dan this is a Winbox
X-Face: o[H8T0h*NGH`K`P)s+4PmYlcy|GNl`~+L6Fi.m:%15m[c%{C7V-ump|WiCYPkQ+hFJhq;XW5^1Rg_El'"fE$~AcYW$Pq\yeh9K_-dJqlQ5\y2\;[yw5DYCtOtsf_.TUy}0U\oL^>[3Y#{AP2^o'bG`bwj`]]UNpCxY\(~xK9b+uZKxrb*4-rkD+

by: Jonathan N. Little - Thu, 5 Aug 2021 14:15 UTC

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:

--
Take care,

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

Subject	Author
Responsive radius as semicircle	Andrew Poulos
Re: Responsive radius as semicircle	Jonathan N. Little