CSS Borders и border-radius для текста

Я столкнулся с этим трюком, когда хотел добавить текст заголовка. Мне нравится, как это выглядит, так как я задавался вопросом, есть ли способ поднять концы.

.pagebreaker {
    padding: 10px;
    margin-bottom: -5px;
    border-top: 4px solid #f6d241;
    border-radius: 35px;
  }

ссылка Изображение: CSS Borders и border-radius для текста

Я пробовал отрицательный радиус границы и отрицательный отступ. Что-то мне здесь не хватает? Или это то, что нельзя сделать?

Спасибо.

css

02.04.2018 20:25

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

Используйте border-bottom

.pagebreaker {
    padding: 10px;
    margin-bottom: -5px;
    border-bottom: 4px solid #f6d241;
    border-radius: 35px;
    
    width: 300px;
    height: 10px;
  }