單個半徑`邊界半徑'作爲特定面的百分比

Question

我需要div的border-radius根據div的尺寸進行更改 - 但不能變成橢圓形或形成藥丸形狀。例如，寬度，高度爲250,35的div應該有border-radius的7px，而280,70中的一個應該有border-radius的15px - 始終爲高度的20％，但始終使用圓形四捨五入。在網站的另一部分，我需要邊框半徑等於min(width, height)/5。我如何在沒有JavaScript的情況下完成此任務

在任何情況下，寬度和高度都是任意的。我目前的解決方案是要求明確的border-radius元素不遵循默認大小，這將不允許調整大小。

.box { 
 
    width: 250px; 
 
    height: 35px; 
 
    border-radius: 7px; 
 
    background-color: black; 
 
    color: white; 
 
    line-height: 35px; 
 
    text-align: center; 
 
    margin: 5px auto; 
 
} 
 
.two { 
 
    width: 280px; 
 
    height: 70px; 
 
    border-radius: 14px; 
 
    line-height: 70px; 
 
} 
 
.three { 
 
    border-radius: 20%; 
 
} 
 
.four { 
 
    border-radius: 999px; 
 
} 
 
.five { 
 
    /* calculated from initial values, note that they are wrong with the larger size */ 
 
    border-radius: 2.8%/20%; 
 
    width: 280px; 
 
    height: 70px; 
 
    line-height: 70px; 
 
}

<div class="box one">yes</div> 
 
<div class="box two">yes</div> 
 
<div class="box three">no</div> 
 
<div class="box four">no</div> 
 
<div class="box five">no</div>

Answer 1

短回答，你不能這樣做min(width, height)/5，但是使用calc()就像這個例子中的那樣，可能是一種儘可能接近你想要的而沒有腳本的方法嗎？

.box { 
 
    width: 250px; 
 
    height: 35px; 
 
    border-radius: calc(35px * 0.2)/calc(35px * 0.2); 
 
    background-color: black; 
 
    color: white; 
 
    line-height: 35px; 
 
    text-align: center; 
 
    margin: 5px auto; 
 
} 
 
.two { 
 
    width: 280px; 
 
    height: 70px; 
 
    border-radius: calc(70px * 0.2)/calc(70px * 0.2); 
 
    line-height: 70px; 
 
}

<div class="box one">yes</div> 
 
<div class="box two">yes</div>

凡border-radius可縮短至

border-radius: calc(35px * 0.2); 

border-radius: calc(70px * 0.2); 

Answer 2

有8個邊境半徑值，在這裏使用的角落是一個省略號不是圓形（儘管它可以）：

MDN Link

border-left-left-radius：1em 5em;

border-right-right-radius：1em 5em;

border-bottom-right-radius：1em 5em;

border-bottom-left-radius：1em 5em;

從你的問題來看，似乎該元件具有4：1的比例，所以我們可以在同一應用到邊界半徑

.box { 
    border-radius: 5%/20%; 
} 

.box { 
 
    width: 250px; 
 
    height: 35px; 
 
    border-radius: 5%/20%; 
 
    background-color: black; 
 
    color: white; 
 
    line-height: 35px; 
 
    text-align: center; 
 
    margin: 5px auto; 
 
} 
 
.two { 
 
    width: 280px; 
 
    height: 70px; 
 
} 
 
.three { 
 
    width: 300px; 
 
    height: 75px; 
 
} 
 
.four { 
 
    width: 400px; 
 
    height: 100px; 
 
}

<div class="box one">yes</div> 
 
<div class="box two">yes</div> 
 

 
<div class="box three">yes</div> 
 
<div class="box four">yes</div>