Элемент с радиусом границы внутри элемента с радиусом границы не согласован

У меня есть макет, который, скорее всего, изменить нельзя. Мне нужно использовать радиус границы для элемента внутри другого элемента с радиусом границы. Цель состоит в том, чтобы заполнить белый пробел. Проблема в том, что углы дочерних элементов переполняются, но я не могу использоватьoverlow:hidden в этом проекте, поэтому я пытаюсь использовать border-radius.

Вот фрагмент, демонстрирующий мою попытку: https://jsfiddle.net/5fgtL4so/5/

Проблема в том, что внутренний радиус границы 30 пикселей не имеет той же кривой, что и внешний радиус границы. Я не хочу жестко кодировать это, поскольку он должен быть отзывчивым. Я также попытался поиграть с шириной и полями, как вы можете видеть во фрагменте, но это не похоже на правильный путь, поскольку у меня все еще есть небольшая погрешность.

Есть идеи, как решить эту проблему?

.parent {
  border: 3px solid tomato;
  background-color: white;
  height: 200px;
  border-radius: 30px;
}

.child {
  border: 3px solid tomato;
  padding:10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
  /* bellow solution is not perfect. There is still tiny white space around innter corners, it's a bit more visible on my project */
  /*
  margin-left: -3px;
  width: calc(100% + 6px);
  */
}
<div class="parent">
  <div class="child">
  </div>
</div>

Источник

2 ответа

Решение

Ты можешь использовать inset box-shadow вместо того border.

.parent {
  /*border: 3px solid tomato;*/
  background-color: white;
  height: 200px;
  border-radius: 30px;
  box-shadow: inset 0px 0px 0 3px tomato;
}

.child {
  border: 3px solid tomato;
  padding: 10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
}
<div class="parent">
  <div class="child">
  </div>
</div>

Кроме того, ваше решение работает, если вы добавите margin-top: -3px также.

.parent {
  border: 3px solid tomato;
  background-color: white;
  height: 200px;
  border-radius: 30px;
}

.child {
  border: 3px solid tomato;
  padding: 10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
  margin-left: -3px;
  margin-top: -3px;
  width: calc(100% + 6px);
}
<div class="parent">
  <div class="child">
  </div>
</div>

Источник

Хотя это немного поздно для этого вопроса, установив родительский overflow: hidden а убрав радиус совсем у ребенка, вы сможете добиться того, что вам нужно.

Источник
Другие вопросы по тегам