Герой USWDS с текстом, расположенным слева, и изображением по диагонали справа ⇐ Html

[Anonymous]

Я пытаюсь воспроизвести герой/заголовок, как на этом снимке экрана: большой левый синий блок со сложенным белым текстом «ЗДАНИЕ/БЛОКИ», подзаголовком под ним («Развитие сильного управления») и панелью изображений с диагональной обрезкой справа. См. прикрепленное изображение.


Я создал пример с использованием базового CSS USWDS и пути обрезки, чтобы создать диагональную правую панель, но он ведет себя не так, как ожидалось, выравнивание/обрезка изображения не соответствует дизайну. Я подозреваю, что проблема связана с размером контейнера сетки/USWDS или координатами полигона clip-path.

В примере используется бесплатное изображение Unsplash (чтобы другие могли его загрузить): https://unsplash.com/photos/group-of-pe ... BLHICVh-lI

Код: Выделить всё

:root {
--brand-blue: #59b6d9;
--accent-blue: #0b6fb0;
}

body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Hero layout */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 280px;
align-items: center;
overflow: hidden;
background: white;
}

/* Left side */
.hero-left {
padding: 2rem;
}

.blue-strip {
background: var(--brand-blue);
display: inline-block;
padding: 1rem 1.25rem;
}

.big {
color: white;
font-size: 3.5rem;
font-weight: 800;
line-height: 0.9;
font-family: Georgia, serif;
}

.subheading {
margin-top: 1.5rem;
}

.subheading h2 {
margin: 0;
font-size: 1.8rem;
color: var(--accent-blue);
font-family: Georgia, serif;
}

/* Right diagonal image */
.hero-right {
min-height: 280px;
background-image: url("https://picsum.photos/1200/800");
background-size: cover;
background-position: center right;

/* Diagonal effect */
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

/* Larger screens */
@media (min-width: 768px) {
.big { font-size: 5rem; }
.subheading h2 { font-size: 2.4rem; }
.hero { min-height: 360px; }
.hero-right {
clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}
}

/* Small screens */
@media (max-width: 600px) {
.hero {
grid-template-columns: 1fr;
}

.hero-right {
clip-path: none; /* problem area */
height: 200px;
background-position: center;
}

.big { font-size: 2.2rem; }

Код: Выделить всё

BUILDING
BLOCKS


Developing Strong
Management

Подробнее здесь: https://stackoverflow.com/questions/799 ... ight-image