Одиночный радиус "border-radius" в процентах от конкретной стороны

Мне нужен border-radius div для изменения, основанный на размерах div но не для того, чтобы идти эллиптически, или сформировать форму таблеток. Например, div с шириной, высота 250,35 должен иметь 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>
0
источник поделиться
2 ответа

Короткий ответ, вы не можете сделать 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);
+1
источник

Здесь используется 8 значений радиуса радиуса, поскольку угол - это многоточие, а не круг (хотя это может быть):

Ссылка MDN

border-top-left-radius: 1em 5em;

border-top-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>
+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос