@RockyMotion

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

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

Особенности, что картинки могут быть разные по высоте, а текст любого размера. Так же у заливки сверху скругленные края.
Как ни пытался не получается сделать заливку на часть картинки, пробовал позиционирование у родительского блока 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;
}
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 1
Это можно реализовать с помощью transform: translateY(Тут пишешь пиксели на сколько нужно съехать в сторону)
Это свойство надо будет прописать блоку с фото и тогда он съедет вниз на сколлько тебе нужно, только прописывай с минусом обязательно, что бы вниз съехала
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы