Как это можно реализовать HTML/CSS

@limberiq · Регистрация: 24.10.2018

Студворк — интернет-сервис помощи студентам

Вопрос как можно реализовать
По середине страницы пишется название блока а по бокам находятся параллелограммы
Примерно как должно быть показано на вложение(с учетом того что блоки буду иметь названия разной длинны)
Заранее благодарен

@AlexZaw · 16.06.2019, 17:05

limberiq,

HTML5
1
<span>Отзывы</span>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body{
  text-align: center;
}
span{
  position: relative;
}
span:before,span:after{
  content: '';
  position: absolute;
  height: 100%;
  width: 20px;
  background: linear-gradient(90deg, #888, #888 47%, transparent 47%, transparent 53%, #888 53% );
  top: 0;
  transform: skewX(-20deg);
}
span:before{
right: calc(100% + 5px);
}
span:after{
left: calc(100% + 5px);
}

@limberiq · 16.06.2019, 23:08 **[ТС]**

Спасибо большое ,а как сделать больше расстояние между соседними параллелограммами ?

@limberiq · 16.06.2019, 23:18 **[ТС]**

AlexZaw, Заранее благодарен

@novichek_1905 · 17.06.2019, 00:46

limberiq, предлагаю ещё вариант, также замечу, что вариант AlexZaw, имеет существенный недостаток, присутствует зернистость характерна для диагональных градиентов.
Также в примере декоративные косые не принимают участия в потоке, если поставить сам блок к левому краю, а не по центру, то диагонали слева, будут выходить за пределы общего контейнера, не гибко...

я бы сделал что-то вроде:

HTML5
1
<span>Text</span>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
span {
  display: flex;
  font: 16px/24px Arial, sans-serif;
}
span:after, span:before {
  content: ' ';
  width: 20px;
  border-right: 8px solid #000;
  border-left: 8px solid #000;
  transform: skew(-20deg);
  box-sizing: border-box;
  flex-shrink: 0;
}
span:before {
  margin-right: 10px;
}
span:after {
  margin-left: 10px;
}

@novichek_1905 · 17.06.2019, 01:10

Пруф во вложении

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@limberiq 0 / 0 / 0 Регистрация: 24.10.2018 Сообщений: 5

	Как это можно реализовать HTML/CSS 16.06.2019, 16:55. Показов 946. Ответов 5 Метки css, html (Все метки) Вопрос как можно реализовать По середине страницы пишется название блока а по бокам находятся параллелограммы Примерно как должно быть показано на вложение(с учетом того что блоки буду иметь названия разной длинны) Заранее благодарен Изображения 0

@limberiq 0 / 0 / 0 Регистрация: 24.10.2018 Сообщений: 5
	16.06.2019, 23:08 [ТС]
	Спасибо большое ,а как сделать больше расстояние между соседними параллелограммами ? Изображения 0

@limberiq 0 / 0 / 0 Регистрация: 24.10.2018 Сообщений: 5
	16.06.2019, 23:18 [ТС]
	AlexZaw, Заранее благодарен 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	17.06.2019, 01:10
	Пруф во вложении Миниатюры 0