Создание задачи в стиле Github. Макет записи/предварительного просмотра.

Для моей жизни я не могу понять, как добиться следующего.

Мне нужно создать форму с поддержкой предварительного просмотра напечатанного контента, как и форма создания новой проблемы Github, как показано ниже.

enter image description here То, что я хочу воспроизвести, — это изогнутая граница вокруг пары Write/Preview с разграничением Write и Preview, как показано на этом изображении.

Как этого добиться в CSS?

Спасибо

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
2
0
26
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я не уверен, как вы собираетесь использовать такой редактор, но если он основан на html, взгляните на редакторы уценки на основе javascript. Они будут использовать css, но javascript — это основной способ обработки всех функций. Некоторые из редакторов обладают широкими возможностями и обеспечивают предварительный просмотр отформатированного текста.

Вот один документ, в котором выделяются 10 различных редакторов, которые могут предоставить то, что вы ищете..

Ответ принят как подходящий

Один из подходов состоит в том, чтобы установить background-color для активной вкладки, также установить цвет ее нижней границы на тот же цвет, что и ее фон, а затем переместить ее вниз, чтобы 1px препятствовал более длинной линии границы.

[...document.querySelectorAll('.tabs > *')].forEach((tab, i, arr) => {
  
  tab.addEventListener('click', () => {
    arr.forEach(tab => tab.classList.remove('active'));
    tab.classList.add('active');
  });
})
.wrapper {
  padding: 4px;
}

.tabs {
  display: flex;
  border-bottom: solid 1px gray;
}

.tabs a {
  text-decoration: none;
  padding: 10px 16px;
  margin-left: 10px;
  border: solid 1px transparent;
  
  /* only rounded border for top left and right */
  border-radius: 8px 8px 0px 0px;
  
  /* move the tab 1px downwards */
  margin-bottom: -1px;
}

.tabs a.active {
  border: solid 1px gray;
  background-color: #fff;
  border-bottom-color: white;
}
<div class="wrapper">
  <div class="tabs">
    <a href="#" class="active">Write</a>
    <a href="#">Preview</a>
  </div>
  <div class="content">
    <p>content</p>
  </div>
</div>

Другие вопросы по теме