Как в CSS сделать заливку на половину объекта с закруглением?

Question

[RockyMotion]

Пытаюсь сделать примерно такое


Особенности, что картинки могут быть разные по высоте, а текст любого размера. Так же у заливки сверху скругленные края.
Как ни пытался не получается сделать заливку на часть картинки, пробовал позиционирование у родительского блока relative у дочернего absolute, так же выносил картинку из блока, но тогда получается что заливка поверх картинки.

Код:

<div class='movie-header'>
            
            <h1> {{ article.title }}</h1>    
            <h3> {{ article.original_lang_title }} </h3>      
            <img class="poster-detail" src='{{ article.poster.url }}'>       
                            
        <div class='bg_gradient'>
                    <p> {{ article.year }}</p>
                    <p> {{ article.genre}} </p>
         </div>
        
        </div>

CSS

.movie-header {
    text-align: center;   
}

.movie-header p {
    color: #f3f3f3;
  
}

.bg_gradient{
    text-align: center;
    width: 100%;
    background: linear-gradient( #8E2AF3,#7C45D2 ,#6532FD);
    bottom: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

Comments

[Антон Литвиненко]

сделать псевдоэлемент от обертки и ему уже размеры заливку и радиусы

[serhiops]

Причем тут Django?

[Ankhena]

Попробовал - нашел вторую проблему сверху от картинки еще есть заголовки, а они то не перемещаются и получается, что если я смещаю картинку на 100px вниз, то там получается разрыв на 100px

Сначала нужно определиться от чего зависит положение градиента.

Например, если "всегда 100px от низа картинки", то просто гридами.
Если от чего-то другого, то решение скорректировать.

Answer 1

[Дмитрий Путилов]

Это можно реализовать с помощью transform: translateY(Тут пишешь пиксели на сколько нужно съехать в сторону)
Это свойство надо будет прописать блоку с фото и тогда он съедет вниз на сколлько тебе нужно, только прописывай с минусом обязательно, что бы вниз съехала

Comments

[Ankhena]

Даже интересно, как это связано с градиентом

[RockyMotion]

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

Попробовал - нашел вторую проблему сверху от картинки еще есть заголовки, а они то не перемещаются и получается, что если я смещаю картинку на 100px вниз, то там получается разрыв на 100px

[Дмитрий Путилов]

RockyMotion, Если я все правильно понял, тгд оберни текст и картинку в один блок и двигай этот блок вниз