Мобильная версияКак создать приведенную ниже структуру с помощью HTML и CSS? Как проще всего создать это изображение? Был бы очень признателен, если бы кто-нибудь помог мне с этим .................................................. .........
До сих пор я пытался это сделать. но я не могу создать дизайн стрелок и выровнять повернутое текстовое поле.
Ниже приведен HTML-код.
Пример Bootstrap 5 Производство
НЕПРЕРЫВНО Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor risus nec ex pharetra, quis facilisis quam hendrerit. Donec volutpat сидеть амет одио Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, Lorem ipsum Lorem ipsum dolor sit amet консектетур Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor Lorem ipsum Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Ниже приведен CSS
/* начало первой строки */ .manufac-img-раздел { граница: 0 пикселей; поле: 0 пикселей 100 пикселей; } .continuos-imp-box { максимальная ширина: 500 пикселей; цвет фона: #dae3f4; максимальная высота: 450 пикселей; маржа: авто; } .Первая строка { оправдание-содержание: центр; выровнять-элементы: по центру; маржа: авто; нижняя граница: пунктир #b0b7c9; } .view-analys-report { поле: 30 пикселей 50 пикселей; высота: 80 пикселей; максимальная высота: 450 пикселей; } /* конец первой строки */ /* начало второй строки */ .второй ряд { оправдание-содержание: центр; выровнять-элементы: по центру; маржа сверху: 50 пикселей; нижняя граница: пунктир #b0b7c9; } .request-box { максимальная ширина: 250 пикселей; цвет фона: #e2f0d9; маржа: авто; } .sign-el-not-box { максимальная ширина: 250 пикселей; поле: авто 20 пикселей; } .assessment-vertical-box { максимальная ширина: 300 пикселей; вес шрифта: 800; } .sec-rw-vw-an-rep-box { максимальная ширина: 300 пикселей; поле: 20 пикселей; } .dialogue-vertical-box{ максимальная ширина: 200 пикселей; } .up-imp-ap-box{ максимальная ширина: 250 пикселей; поле: авто 20 пикселей; } /* конец второй строки */ /* начало третьей строки */ .третий ряд{ оправдание-содержание: центр; выровнять-элементы: по центру; маржа сверху: 50 пикселей; нижняя граница: пунктир #b0b7c9; } .el-pr-not-box{ максимальная ширина: 300 пикселей; поле: авто 20 пикселей; } .thrd-rw-assessment-box{ максимальная ширина: 200 пикселей; поле: авто 20 пикселей; } .enter-rpt-box{ максимальная ширина: 200 пикселей; поле: авто 20 пикселей; } /* конец третьей строки */ /* начало 4-й строки */ .четвертая строка{ оправдание-содержание: центр; выровнять-элементы: по центру; маржа сверху: 50 пикселей; } .qlty-cntrl-box{ максимальная ширина: 300 пикселей; поле: авто 20 пикселей; } .men-img-раздел{ граница: 0 пикселей; поле: 0 пикселей 100 пикселей; } .men-img-раздел img{ ширина: 90 пикселей! важно; } /* конец 4-й строки */ /* общий */ .border-коричневый{ цвет границы: #ce8250!важно; } .вертикальныйтекст { преобразование: поворот (-270 градусов); Transform-Origin: справа, вверху; -ms-transform: поворот (-270 градусов); -ms-transform-origin: вправо, вверху; -webkit-transform: поворот (-270 градусов); -webkit-transform-origin: справа, вверху; позиция: абсолютная; цвет: #0a3f4f; }
