Элемент с радиусом границы и разными радиусами не отображается должным образом

Я пытаюсь создать элемент "tag" -like, где радиусы границ различаются с левой стороны.

border-radius: 50px; /* for a completely rounded right side */
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;

Вот очень краткий пример:

.tag {
  border-radius: 50px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  background-color: red;
  color: white;
  font-family: Helvetica, sans-serif;
}
<span class="tag">Jeanne Oliver</span>

Просмотр на JSFiddle

Проблема: два угла слева, где я должен иметь закругленные углы размером 3 пикселя, вообще не имеют округления (см. Это в скрипке)

Возможная начальная точка Я заметил, что если я 10-12px больший радиус до чего-то вроде 10-12px проблема перестанет проявляться.

Однако я не понимаю, ПОЧЕМУ это происходит, а также мне нужно большее число, потому что код нужно использовать для разных размеров тегов и не хочет переписывать радиус границы для каждого размера.

+2
источник поделиться
2 ответа

Это происходит, когда 2 смежных угла превышают размер поля рамки (в вашем случае это 50px верхний правый и 50px внизу справа, что превышает размеры элементов), и браузер должен масштабировать весь радиус границы до тех пор, пока они не пересекаются,

Более подробная информация на www.w3.org - угловое перекрытие и лучший пример здесь (Lea Verou, "Humble Border-Radius")

+2
источник

левый радиус, ничего не происходит - вы можете проверить его, установив display: inline-block; height: 200px; display: inline-block; height: 200px; охватывать. 3px - очень маленький радиус, чтобы сделать видимый эффект на ваш первоначальный размер диапазона.

0
источник

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