Member 14083741 Ответов: 1

Как создать этот макет?

Я пытаюсь создать этот стиль в CSS. это изображение, которое я сделал в photoshop, и мне было интересно, можно ли его вообще сделать только в html и css? или мне придется использовать фотографию? пожалуйста, помогите, это для школьного проекта.

изображение можно посмотреть здесь: 1 — imgbb.com[^]

Что я уже пробовал:

я уже пытался взглянуть на перспективу flexbox, но я не уверен, что flexbox-это способ procced.

CHill60

Я рискнул и пошел по твоей ссылке. Необычно, что он не был заблокирован нашим брандмауэром, но это было, вероятно, потому, что там ничего не было видно. Поэтому я не могу комментировать, подходит ли flexbox.
Почему бы не опубликовать CSS, который вы пробовали, и просто объяснить, что идет не так

1 Ответов

Рейтинг:
0

Richard Deeming

Вам нужно будет использовать несколько фоновых изображений - одно для изображения и линейный градиент для сплошного цвета.
Использование нескольких фонов | MDN[^]
Например: Edit fiddle - JSFiddle[^] 

.fancy-image {
    box-sizing: border-box;
    width: 800px;
    height: 300px;
    background: linear-gradient(115deg, rgba(68,68,68,0) 0%,rgba(68,68,68,0) 45%,rgba(68,68,68,1) 45%,rgba(68,68,68,1) 100%), url(https://placekitten.com/800/300) top left no-repeat;
    color: white;
    padding: 80px 15px 0 390px;
}


Если вы хотите, чтобы текст следовал наклонному краю, то вам нужно будет использовать CSS-фигуру.
Взгляните по — новому на CSS Shapes- Smashing Magazine[^]
Например: Edit fiddle - JSFiddle[^]
.fancy-image {
    box-sizing: border-box;
    width: 800px;
    height: 300px;
    background: linear-gradient(115deg, rgba(68,68,68,0) 0%,rgba(68,68,68,0) 45%,rgba(68,68,68,1) 45%,rgba(68,68,68,1) 100%), url(https://placekitten.com/800/300) top left no-repeat;
    color: white;
}
.fancy-image::before {
    content: "";
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    shape-outside: linear-gradient(115deg, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,0) 100%);
    shape-margin: 5px;
}

jaket-cp

хороший +5, несколько фонов - кто новый?